สล็อตที่มีชื่อและสล็อตเริ่มต้น
หลายรายการ และไวยากรณ์ย่อ #name
สล็อตที่มีชื่อและสล็อตเริ่มต้น เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
สล็อตคืออะไร
สล็อตช่วยให้คอมโพเนนต์แม่ส่งมาร์กอัปเข้าไปในคอมโพเนนต์ลูก คอมโพเนนต์ลูกจะเป็นผู้กำหนดว่าเนื้อหานั้นปรากฏ ที่ใด โดยใช้องค์ประกอบ <slot> นี่คือการกระจายเนื้อหาของ Vue
สล็อตเริ่มต้น
<slot> ที่ไม่มีชื่อคือสล็อตเริ่มต้น สิ่งใดก็ตามที่คอมโพเนนต์แม่วางไว้ระหว่างแท็กของคอมโพเนนต์จะไปปรากฏที่นั่น
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>การใช้สล็อตเริ่มต้น
คอมโพเนนต์แม่เพียงวางเนื้อหาไว้ภายในแท็กของคอมโพเนนต์
<Card>
<p>This goes into the default slot</p>
</Card>เหตุผลที่ใช้สล็อตที่มีชื่อ
คอมโพเนนต์จำนวนมากมีจุดแทรกหลายจุด เช่น ส่วนหัว เนื้อหา และส่วนท้าย สล็อตที่มีชื่อจะกำหนดตัวระบุให้แต่ละพื้นที่ เพื่อให้คอมโพเนนต์แม่ระบุเป้าหมายของแต่ละพื้นที่ได้โดยอิสระ
การประกาศสล็อตที่มีชื่อ
เพิ่มแอตทริบิวต์ name ให้แต่ละสล็อต คอมโพเนนต์หนึ่งสามารถใช้สล็อตที่มีชื่อร่วมกับสล็อตเริ่มต้นหนึ่งสล็อต ซึ่งไม่มีชื่อได้
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>เติมสล็อตที่มีชื่อด้วย v-slot
ในคอมโพเนนต์แม่ ให้ห่อเนื้อหาไว้ใน <template> พร้อมคำสั่ง v-slot:name เพื่อระบุสล็อตที่มีชื่อ
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>รูปแบบย่อ #
v-slot: มีรูปแบบย่อเป็น # ดังนั้น v-slot:header จึงเขียนเป็น #header ได้ ซึ่งเป็นรูปแบบที่กระชับและใช้กันตามแนวทางของ Vue
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>เนื้อหาเริ่มต้นระหว่างแท็ก
เนื้อหาที่วางไว้โดยตรงระหว่างแท็กของคอมโพเนนต์ ซึ่งไม่ได้อยู่ในเทมเพลตที่มีชื่อ จะไปยังสล็อตเริ่มต้น คุณสามารถระบุเป้าหมายอย่างชัดเจนด้วย #default ได้เช่นกัน
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>การผสมแบบโดยนัยและแบบระบุชัดเจน
คุณสามารถเขียนเนื้อหาเริ่มต้นแบบไม่เคร่งครัด และเขียนสล็อตที่มีชื่อผ่านเทมเพลตในการใช้งานเดียวกันได้ Vue จะส่งเนื้อหาแต่ละส่วนไปยังตำแหน่งที่ถูกต้องตามชื่อ
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>ลำดับการแสดงผล
ลำดับของสล็อตในคอมโพเนนต์แม่ไม่สำคัญ เพราะเทมเพลตของคอมโพเนนต์ลูกเป็นผู้ควบคุมเค้าโครงสุดท้าย เนื้อหาของสล็อตจะแสดงตรงตำแหน่งที่คอมโพเนนต์ลูกวาง <slot> ที่ตรงกันไว้เสมอ
คอมโพเนนต์เค้าโครงสำหรับใช้งานจริง
สล็อตที่มีชื่อช่วยสร้างโครงเค้าโครงที่นำกลับมาใช้ใหม่ได้ <BaseLayout> หนึ่งรายการสามารถรองรับหน้าใดก็ได้ โดยรับสล็อตสำหรับส่วนหัว แถบด้านข้าง และเนื้อหาหลัก
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>ตรวจสอบความเข้าใจ
รูปแบบย่อของ v-slot:header คืออะไร
สรุปทบทวน
คุณได้เรียนรู้ว่าสล็อตใช้กระจายมาร์กอัปจากคอมโพเนนต์แม่ไปยังคอมโพเนนต์ลูก <slot> ที่ไม่มีชื่อคือสล็อตเริ่มต้น การเพิ่ม name จะสร้างสล็อตที่มีชื่อ คอมโพเนนต์แม่เติมเนื้อหาให้สล็อตเหล่านี้ด้วย <template v-slot:name> หรือรูปแบบย่อ #name และเทมเพลตของคอมโพเนนต์ลูกจะเป็นผู้กำหนดตำแหน่งสุดท้าย
คำถามที่พบบ่อย
บทเรียน “สล็อตที่มีชื่อและสล็อตเริ่มต้น” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สล็อตที่มีชื่อและสล็อตเริ่มต้น” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สล็อตที่มีชื่อและสล็อตเริ่มต้น”
หลายรายการ และไวยากรณ์ย่อ #name คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “สล็อตที่มีชื่อและสล็อตเริ่มต้น” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สล็อตที่มีชื่อและสล็อตเริ่มต้น
- สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่
- ชื่อสล็อตแบบไดนามิก
- เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต