Snippet ค่าเริ่มต้นและแบบระบุชื่อ
จัดเตรียม snippet สำรองและตั้งชื่อช่อง snippet หลายช่องในคอมโพเนนต์
Snippet ค่าเริ่มต้นและแบบระบุชื่อ เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สนิปเป็ตเริ่มต้น
เนื้อหาที่วางไว้ภายในแท็กของคอมโพเนนต์จะกลายเป็นสนิปเป็ตเริ่มต้น ซึ่งเข้าถึงได้ผ่าน children
<Card>
<p>Inside the card</p>
</Card>ภายในคอมโพเนนต์
เรนเดอร์เนื้อหาเริ่มต้นด้วยพร็อพส์ children
let { children } = $props();
<div class="card">
{@render children()}
</div>สนิปเป็ตที่มีชื่อ
ส่งสนิปเป็ตหลายรายการด้วยชื่อในรูปแบบพร็อพส์
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>รับสนิปเป็ตที่มีชื่อ
ประกาศสนิปเป็ตที่มีชื่อแต่ละรายการเป็นพร็อพส์
let { header, body } = $props();
{@render header()}
{@render body()}เนื้อหาสำรอง
กำหนดเนื้อหาสำรองเริ่มต้นโดยใช้เงื่อนไขทั่วไป
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}ความปลอดภัยด้านชนิดข้อมูล
กำหนดชนิดข้อมูลของพารามิเตอร์สนิปเป็ตแต่ละรายการอย่างชัดเจน เพื่อรองรับเครื่องมือพัฒนา
แทนที่สล็อตที่มีชื่อ
สนิปเป็ตเข้ามาแทนที่รูปแบบสล็อตที่มีชื่อจาก Svelte 4 และมีความสามารถมากกว่า
เนื้อหาเริ่มต้น
สนิปเป็ตไม่มีเนื้อหาสำรองในตัว ให้ใช้ {#if} สำหรับกรณีนี้
รูปแบบการประกอบ
ผสานสนิปเป็ตเริ่มต้นและสนิปเป็ตที่มีชื่อ เพื่อสร้างการออกแบบคอมโพเนนต์แบบไร้ส่วนแสดงผล
เคล็ดลับการย้ายระบบ
เมื่อย้ายระบบ ให้แปลงสล็อตที่มีชื่อแต่ละรายการเป็นพร็อพส์สนิปเป็ตที่มีชื่อ
การอนุมานชนิดข้อมูลด้วย TS
Svelte 5 สร้างชนิดข้อมูล Snippet โดยอัตโนมัติจากพร็อพส์ของคอมโพเนนต์
ตรวจสอบความเข้าใจ
อะไรเข้ามาแทนที่สล็อตที่มีชื่อใน Svelte 5
สรุปทบทวน
เนื้อหาเริ่มต้นใช้สนิปเป็ต children ส่วนสนิปเป็ตที่มีชื่อคือพร็อพส์ที่ระบุอย่างชัดเจนและเรนเดอร์ด้วย @render
คำถามที่พบบ่อย
บทเรียน “Snippet ค่าเริ่มต้นและแบบระบุชื่อ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Snippet ค่าเริ่มต้นและแบบระบุชื่อ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Snippet ค่าเริ่มต้นและแบบระบุชื่อ”
จัดเตรียม snippet สำรองและตั้งชื่อช่อง snippet หลายช่องในคอมโพเนนต์ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “Snippet ค่าเริ่มต้นและแบบระบุชื่อ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- $props() สำหรับพร็อพส์ที่ระบุชนิด
- {#snippet} และ {@render}
- ส่ง Snippet เป็นพร็อพส์
- Snippet ค่าเริ่มต้นและแบบระบุชื่อ