สล็อตเริ่มต้นสำหรับการฉายเนื้อหา
วางองค์ประกอบ ไว้ภายในคอมโพเนนต์เพื่อรับเนื้อหาจากคอมโพเนนต์ลูกได้ตามต้องการ
สล็อตเริ่มต้นสำหรับการฉายเนื้อหา เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สล็อตคืออะไร
สล็อตช่วยให้คอมโพเนนต์แม่แทรกมาร์กอัปลงในตำแหน่งเฉพาะของคอมโพเนนต์ลูกได้
องค์ประกอบ slot
ภายในคอมโพเนนต์ลูก ให้วางแท็ก <slot /> ไว้ตรงตำแหน่งที่ต้องการให้เนื้อหาปรากฏ
<!-- Card.svelte -->
<div class="card">
<slot />
</div>ใช้จากคอมโพเนนต์แม่
วางคอมโพเนนต์ลูกไว้ภายในแท็กคอมโพเนนต์นั้น เนื้อหาจะปรากฏตรงตำแหน่งของสล็อต
<Card>
<p>Hello inside the card!</p>
</Card>พลังของการประกอบ
รูปแบบนี้ช่วยให้สร้างโครงร่างที่นำกลับมาใช้ใหม่ได้ เช่น การ์ด หน้าต่างโมดัล และหน้าเว็บ
คอมโพเนนต์ลูกหลายรายการ
องค์ประกอบจำนวนเท่าใดก็ได้สามารถเติมสล็อตเริ่มต้นได้
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>สตริงธรรมดา
คุณสามารถส่งข้อความธรรมดาเป็นเนื้อหาของสล็อตได้เช่นกัน
<Button>Click me</Button>เนื้อหาแบบมีเงื่อนไข
ใช้ {#if} ภายในคอมโพเนนต์แม่เพื่อเลือกเนื้อหาที่จะใส่ลงในสล็อต
สล็อตของคอมโพเนนต์
เนื้อหาของสล็อตสามารถรวมคอมโพเนนต์อื่นได้อย่างอิสระ
<Card>
<Avatar />
<Username />
</Card>การจัดรูปแบบ
เนื้อหาที่ใส่ในสล็อตจะคงรูปแบบของคอมโพเนนต์แม่ที่เขียนเนื้อหานั้น ไม่ใช่ของคอมโพเนนต์ลูก
โครงร่างกับตรรกะ
สล็อตเป็นเครื่องมือสำหรับโครงร่างและการประกอบ ไม่ใช่กลไกส่งข้อมูล ให้ใช้พร็อพสำหรับข้อมูล
จุดแสดงสล็อต
คอมโพเนนต์หนึ่งสามารถมีตำแหน่งสล็อตหลายตำแหน่งได้ ทั้งสล็อตเริ่มต้นและสล็อตที่ตั้งชื่อ
ตรวจสอบความเข้าใจ
เนื้อหาที่ใส่ในสล็อตจะปรากฏที่ใด
สรุปทบทวน
ใช้ <slot /> ในคอมโพเนนต์ลูก และส่งคอมโพเนนต์ลูกไว้ระหว่างแท็กของคอมโพเนนต์แม่เพื่อแทรกเนื้อหา
คำถามที่พบบ่อย
บทเรียน “สล็อตเริ่มต้นสำหรับการฉายเนื้อหา” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “สล็อตเริ่มต้นสำหรับการฉายเนื้อหา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “สล็อตเริ่มต้นสำหรับการฉายเนื้อหา”
วางองค์ประกอบ ไว้ภายในคอมโพเนนต์เพื่อรับเนื้อหาจากคอมโพเนนต์ลูกได้ตามต้องการ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “สล็อตเริ่มต้นสำหรับการฉายเนื้อหา” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สล็อตเริ่มต้นสำหรับการฉายเนื้อหา
- สล็อตที่มีชื่อด้วย slot="name"
- เนื้อหา fallback ของสล็อต
- ตรวจสอบเนื้อหาสล็อตด้วย $$slots