เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต
เนื้อหาสล็อตเริ่มต้น การใช้ useSlots() เพื่อตรวจสอบว่ามีการส่งสล็อตหรือไม่ และการแสดงผลแบบมีเงื่อนไข
เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
เนื้อหาสำรองของสล็อต
<slot> สามารถมีมาร์กอัปเริ่มต้นได้ หากคอมโพเนนต์แม่ส่งเนื้อหาสำหรับสล็อตนั้นมา เนื้อหาจากคอมโพเนนต์แม่จะมีลำดับความสำคัญกว่า หากไม่ส่งมา ระบบจะแสดงค่าเริ่มต้นสำรองภายในสล็อต
การกำหนดค่าเริ่มต้นสำรอง
วางเนื้อหาเริ่มต้นไว้ระหว่างแท็กสล็อต เนื้อหานี้เป็นค่าเริ่มต้นสำรองที่เหมาะสมสำหรับสล็อตที่ไม่บังคับ
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>ค่าเริ่มต้นสำรองเมื่อทำงาน
หากคอมโพเนนต์แม่ไม่ส่งอะไรมา ระบบจะแสดงข้อความ "ส่ง" หากคอมโพเนนต์แม่ส่งเนื้อหามา เนื้อหานั้นจะแทนที่ค่าเริ่มต้นสำรอง
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->ค่าเริ่มต้นสำรองของสล็อตที่มีชื่อ
สล็อตที่มีชื่อก็รองรับค่าเริ่มต้นสำรองเช่นกัน สล็อตส่วนหัวสามารถแสดงชื่อมาตรฐานเป็นค่าเริ่มต้นได้เมื่อคอมโพเนนต์แม่ไม่ได้ส่งเนื้อหามา
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>ปัญหาขององค์ประกอบครอบที่ว่างเปล่า
บางครั้งคุณต้องการแสดงองค์ประกอบครอบ เช่น คอนเทนเนอร์ส่วนท้าย เฉพาะเมื่อคอมโพเนนต์แม่ส่งเนื้อหาสล็อตมาเท่านั้น ดังนั้นคุณต้องตรวจสอบว่ามีสล็อตอยู่หรือไม่
คอมโพสิเบิล useSlots
ใน <script setup> useSlots() จะส่งคืนออบเจ็กต์ที่มีชื่อสล็อตที่ส่งมาเป็นคีย์ แต่ละค่าคือฟังก์ชันที่ส่งคืนโหนดเสมือนของสล็อต
import { useSlots } from "vue";
const slots = useSlots();การตรวจสอบว่าสล็อตถูกส่งมา
เรียกใช้ฟังก์ชันของสล็อตแล้วตรวจสอบว่าเนื้อหาเป็นค่าจริง slots.header จะมีอยู่ก็ต่อเมื่อคอมโพเนนต์แม่ส่งสล็อตส่วนหัวมา การเรียกใช้ slots.header?.() จะส่งคืนโหนดเสมือนของสล็อตอย่างปลอดภัย
const hasHeader = computed(() => !!slots.header);การแสดงองค์ประกอบครอบตามเงื่อนไข
ใช้การตรวจสอบร่วมกับ v-if เพื่อให้องค์ประกอบครอบปรากฏเฉพาะเมื่อมีเนื้อหา ช่วยหลีกเลี่ยงโหนด DOM ที่ว่างเปล่า
<header v-if="slots.header">
<slot name="header" />
</header>เหตุผลที่ใช้การเชื่อมโยงแบบเลือกได้
slots.header?.() ป้องกันกรณีที่สล็อตไม่มีค่า หากไม่ใช้การเชื่อมโยงแบบเลือกได้ การเรียกใช้สล็อตที่ไม่มีค่าจะทำให้เกิดข้อผิดพลาด รูปแบบนี้พบได้ทั่วไปในฟังก์ชันเรนเดอร์และการตรวจสอบค่าที่คำนวณได้
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots ในเทมเพลต
เทมเพลตสามารถเข้าถึงข้อมูลเดียวกันผ่าน $slots ได้ คุณสามารถตรวจสอบ $slots.footer โดยตรงใน v-if โดยไม่ต้องนำเข้า useSlots
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>นำทุกอย่างมาประกอบกัน
คอมโพเนนต์การ์ดที่ออกแบบมาอย่างดีจะแสดงแต่ละส่วนเฉพาะเมื่อมีการส่งสล็อตส่วนนั้นมา ทำให้มาร์กอัปสะอาดและรูปแบบการจัดสไตล์คาดเดาได้
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>ตรวจสอบความเข้าใจ
คุณจะตรวจสอบได้อย่างไรว่าใน script setup คอมโพเนนต์แม่ส่งสล็อต "ส่วนหัว" มา
ทบทวน
คุณได้เรียนรู้ว่าสล็อตสามารถมีเนื้อหาสำรองซึ่งจะแสดงเมื่อคอมโพเนนต์แม่ไม่ได้ส่งสล็อตมา หากต้องการแสดงองค์ประกอบครอบตามเงื่อนไข ให้ตรวจสอบการมีอยู่ของสล็อตด้วย useSlots() (slots.header?.()) ใน script setup หรือใช้ $slots.header ในเทมเพลต
คำถามที่พบบ่อย
บทเรียน “เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต”
เนื้อหาสล็อตเริ่มต้น การใช้ useSlots() เพื่อตรวจสอบว่ามีการส่งสล็อตหรือไม่ และการแสดงผลแบบมีเงื่อนไข คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สล็อตที่มีชื่อและสล็อตเริ่มต้น
- สล็อตแบบกำหนดขอบเขต: การส่งข้อมูลไปยังคอมโพเนนต์แม่
- ชื่อสล็อตแบบไดนามิก
- เนื้อหาสำรองของสล็อตและการตรวจสอบสล็อต