ชื่อสล็อตแบบไดนามิก
v-slot:[dynamicName] การเลือกสล็อตโดยทางโปรแกรม และการแสดงสล็อตแบบมีเงื่อนไข
ชื่อสล็อตแบบไดนามิก เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ใช้ชื่อสล็อตแบบไดนามิก
บางครั้งยังไม่ทราบว่าสล็อตที่ต้องการเติมคือสล็อตใดจนกว่าจะถึงขณะทำงาน เพราะขึ้นอยู่กับพร็อพ state หรือตัวแปรของลูป Vue อนุญาตให้คำนวณชื่อสล็อตด้วยไวยากรณ์วงเล็บเหลี่ยม
ไวยากรณ์อาร์กิวเมนต์แบบไดนามิก
ครอบนิพจน์ด้วยวงเล็บเหลี่ยมหลัง v-slot: Vue จะประเมินนิพจน์นั้นเพื่อกำหนดชื่อสล็อตเป้าหมาย
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>รูปแบบย่อด้วยวงเล็บเหลี่ยม
รูปแบบย่อ # รองรับอาร์กิวเมนต์แบบไดนามิกเช่นกัน
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>กำหนดชื่อจาก state
นิพจน์ในวงเล็บสามารถอ่านค่าแบบตอบสนองใดก็ได้ การสลับตัวแปรจะเปลี่ยนว่าสล็อตใดเป็นปลายทางของเนื้อหา
const dynamicName = ref("header");
// later: dynamicName.value = "footer";การสลับเนื้อหาที่แสดงผล
เมื่อใช้ร่วมกับคอมโพเนนต์ลูกที่กำหนดสล็อตที่มีชื่อไว้หลายรายการ ชื่อแบบไดนามิกช่วยให้เทมเพลตหนึ่งแสดงผลพื้นที่ต่าง ๆ ตาม state ได้
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>เลือกชื่อจากพร็อพ
พร็อพของคอมโพเนนต์สามารถกำหนดสล็อตได้ วิธีนี้มีประโยชน์สำหรับตัวห่อที่กำหนดค่าได้ ซึ่งผู้เรียกเป็นผู้เลือกพื้นที่
const props = defineProps({ target: String });
// use props.target inside #[props.target]วนซ้ำสล็อตแบบไดนามิก
คุณสามารถแสดงผลสล็อตในลูปได้ โดยคำนวณชื่อแต่ละรายการจากรายการในลูป เหมาะสำหรับคอลัมน์ของตารางหรือระบบแท็บ
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>ชื่อที่เป็นตัวพิมพ์เล็กและถูกต้อง
ชื่อสล็อตแบบไดนามิกควรประเมินออกมาเป็นสตริงที่ถูกต้อง ค่า null จะถือเป็นสล็อตเริ่มต้น หลีกเลี่ยงช่องว่างและอักขระที่ไม่ถูกต้องในชื่อแอตทริบิวต์ HTML เมื่อใช้เทมเพลตในบรรทัด
const name = condition ? "primary" : null;
// null -> default slotการเลือกสล็อตตามเงื่อนไข
นิพจน์สามส่วนภายในวงเล็บเหลี่ยมจะเลือกสล็อตจากเงื่อนไขได้โดยตรงในเทมเพลต
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>กรณีใช้งานคอมโพเนนต์แท็บ
คอมโพเนนต์แท็บสามารถแสดงเนื้อหาของแท็บที่ active ได้ โดยคำนวณชื่อสล็อตจาก id ของแท็บที่เลือก ทำให้คอมโพเนนต์แม่ยังคงเป็นแบบประกาศ
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>รักษาความอ่านง่าย
สล็อตแบบไดนามิกมีประสิทธิภาพมาก แต่ก็อาจทำให้เจตนาอ่านได้ยาก ควรใช้เมื่อชุดสล็อตขับเคลื่อนด้วยข้อมูลอย่างแท้จริง หากมีสล็อตจำนวนคงที่เพียงไม่กี่รายการ สล็อตที่มีชื่อแบบธรรมดาจะอ่านเข้าใจได้ชัดเจนกว่า
ตรวจสอบความเข้าใจ
ไวยากรณ์ใดใช้เลือกสล็อตที่มีชื่อซึ่งคำนวณขณะทำงาน
ทบทวน
คุณได้เรียนรู้ว่าชื่อสล็อตแบบไดนามิกใช้ไวยากรณ์วงเล็บ v-slot:[expr] หรือ #[expr] เพื่อคำนวณว่าจะเติมสล็อตใดจากพร็อพหรือสถานะ ทำให้สร้างองค์ประกอบครอบที่กำหนดค่าได้ ระบบแท็บ และการแสดงผลคอลัมน์ตามข้อมูลได้
คำถามที่พบบ่อย
บทเรียน “ชื่อสล็อตแบบไดนามิก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ชื่อสล็อตแบบไดนามิก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ชื่อสล็อตแบบไดนามิก”
v-slot:[dynamicName] การเลือกสล็อตโดยทางโปรแกรม และการแสดงสล็อตแบบมีเงื่อนไข คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ชื่อสล็อตแบบไดนามิก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สล็อตที่มีชื่อและสล็อตเริ่มต้น
- สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่
- ชื่อสล็อตแบบไดนามิก
- เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต