เรียนรู้การใช้งาน Vue Template: การใช้งาน Slot และ Slot-scope

พฤษภาคม 23, 2024พฤษภาคม 23, 2024 admin

# เรียนรู้การใช้งาน Vue Template: การใช้งาน Slot และ Slot-scope

Vue Template คือหนึ่งในส่วนสำคัญของ Vue.js ที่ช่วยให้เราสร้าง UI แบบ reusable และ modular ได้อย่างมีประสิทธิภาพ ในบทความนี้ เราจะมาเรียนรู้การใช้งาน Slot และ Slot-scope ซึ่งเป็นเทคนิคที่ช่วยให้เราสร้าง Component ที่สามารถรับค่าและแสดงข้อมูลได้อย่างคล่องตัวมากยิ่งขึ้น

## Slot คืออะไร?

Slot เป็นวิธีที่ Vue.js ช่วยให้เราสร้าง Component ที่สามารถรับ Element หรือ Component ภายในได้ โดยที่ Component ที่เราสร้างขึ้นจะเป็น Container หรือ Placeholder ที่ให้สิ่งอื่นมาเพิ่มเข้าไป

ตัวอย่างการใช้งาน Slot:

“`vue

“`

ในตัวอย่างข้างต้นเรามี Component ที่มี Slot โดยการใช้ “ เราสามารถเอา Element หรือ Component อะไรก็ได้มาใส่ลงไปแทนที่ Slot นี้ได้

## Slot-scope คืออะไร?

Slot-scope เป็นวิธีที่ช่วยให้เราส่งค่าจาก Parent Component มาให้ Child Component ผ่าน Slot โดยที่ Child Component สามารถนำค่านั้นมาใช้งานได้

ตัวอย่างการใช้งาน Slot-scope:

“`vue

import ChildComponent from ‘./ChildComponent.vue’;

export default {
components: {
ChildComponent
}
};

export default {
data() {
return {
message: ‘สวัสดีจาก Child Component!’
};
}
};

“`

ในตัวอย่างข้างต้นเรามี Parent Component ส่งค่า message มาให้ Child Component ผ่าน Slot-scope และ Child Component ก็นำค่า message นั้นมาแสดงใน Template ของตัวเองได้

การใช้งาน Slot และ Slot-scope เป็นเทคนิคที่มีประโยชน์ในการสร้าง Component ที่มีความยืดหยุ่นและสามารถ reuse ได้ดี ๆ หวังว่าบทความนี้จะช่วยเสริมความเข้าใจและทักษะการเขียน Vue Template ของคุณได้!