สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่
slot :data='value', v-slot='{ data }' ที่ฝั่งคอมโพเนนต์แม่ และรูปแบบ render prop
สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ข้อจำกัดของสล็อตแบบธรรมดา
สล็อตแบบธรรมดาช่วยให้คอมโพเนนต์แม่ส่งมาร์กอัปลงไปได้ แต่คอมโพเนนต์แม่ไม่สามารถเข้าถึงข้อมูลภายในของคอมโพเนนต์ลูกได้ สล็อตแบบมีขอบเขตแก้ปัญหานี้โดยให้คอมโพเนนต์ลูกเปิดเผยข้อมูลกลับไปยังเนื้อหาของสล็อต
การผูกข้อมูลบนสล็อต
คอมโพเนนต์ลูกผูกแอตทริบิวต์บนองค์ประกอบ <slot> ของตนเอง ซึ่งเรียกว่า slot props ข้อมูลเหล่านี้จะถูกส่งต่อให้สิ่งที่คอมโพเนนต์แม่แสดงผล
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>การรับ Slot Props
ในคอมโพเนนต์แม่ ค่าของ v-slot จะกลายเป็นออบเจ็กต์ที่มี slot props ทั้งหมดซึ่งคอมโพเนนต์ลูกผูกไว้
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>การแยกโครงสร้าง Slot Props
เนื่องจากค่าของสล็อตเป็นเพียงออบเจ็กต์ คุณจึงสามารถแยกโครงสร้างค่าในบรรทัดได้ เพื่อให้โค้ดอ่านง่ายขึ้น
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>รูปแบบย่อสำหรับสล็อตเริ่มต้นแบบมีขอบเขต
เมื่อใช้เฉพาะสล็อตเริ่มต้น คุณสามารถวาง v-slot ไว้บนแท็กของคอมโพเนนต์โดยตรง แทนการใช้เทมเพลตซ้อนอยู่ภายใน
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>การเปลี่ยนชื่อและค่าเริ่มต้น
การแยกโครงสร้างรองรับทั้งการเปลี่ยนชื่อและค่าปริยาย เช่นเดียวกับ JavaScript ปกติ
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>สล็อตที่มีชื่อแบบมีขอบเขต
สล็อตที่มีชื่อสามารถกำหนดขอบเขตได้เช่นกัน ให้รวมชื่อเข้ากับ props ที่แยกโครงสร้างแล้ว
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>คอมโพเนนต์แบบไม่แสดงผล
สล็อตแบบมีขอบเขตช่วยให้ใช้รูปแบบ คอมโพเนนต์แบบไม่แสดงผลได้ กล่าวคือคอมโพเนนต์จะจัดการตรรกะและ state แต่ไม่แสดงมาร์กอัปของตนเอง เพียงเปิดเผยข้อมูลผ่านสล็อตแบบมีขอบเขต แล้วให้คอมโพเนนต์แม่เป็นผู้กำหนดส่วนติดต่อผู้ใช้
ตัวติดตามเมาส์แบบไม่แสดงผล
คอมโพเนนต์จะติดตามเคอร์เซอร์และเปิดเผยพิกัด โดยแสดงผลเฉพาะสล็อตเริ่มต้นของตนเอง พร้อมส่งค่า x และ y ไปให้
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>การใช้คอมโพเนนต์แบบไม่แสดงผล
คอมโพเนนต์แม่เป็นผู้จัดเตรียมองค์ประกอบภาพทั้งหมดและอ่านข้อมูลที่เปิดเผย ทำให้ตรรกะแยกออกจากการนำเสนอได้อย่างสมบูรณ์
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>สล็อตแบบมีขอบเขตเทียบกับ Composables
ใน Vue 3 มักใช้คอมโพสิเบิลแทนคอมโพเนนต์แบบไม่แสดงผลเมื่อต้องการนำตรรกะกลับมาใช้ใหม่เพียงอย่างเดียว แต่สล็อตแบบมีขอบเขตยังเหมาะกว่าเมื่อคอมโพเนนต์ลูกต้องควบคุมการวนซ้ำหรือโครงสร้าง เช่น รายการหรือตาราง ขณะที่คอมโพเนนต์แม่ปรับแต่งแต่ละรายการได้
ตรวจสอบความเข้าใจ
คอมโพเนนต์แม่รับข้อมูลที่สล็อตแบบมีขอบเขตเปิดเผยออกมาได้อย่างไร
สรุปทบทวน
คุณได้เรียนรู้ว่าสล็อตแบบมีขอบเขตช่วยให้คอมโพเนนต์ลูกเปิดเผยข้อมูลขึ้นมา โดยผูก props บน <slot> คอมโพเนนต์แม่อ่านข้อมูลเหล่านี้ผ่านค่าของ v-slot ซึ่งมักแยกโครงสร้างออกมาใช้ และทำให้สร้างคอมโพเนนต์แบบไม่แสดงผลที่แยกตรรกะออกจากการนำเสนอได้
คำถามที่พบบ่อย
บทเรียน “สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่”
slot :data='value', v-slot='{ data }' ที่ฝั่งคอมโพเนนต์แม่ และรูปแบบ render prop คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สล็อตที่มีชื่อและสล็อตเริ่มต้น
- สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่
- ชื่อสล็อตแบบไดนามิก
- เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต