{#snippet} และ {@render}
กำหนดส่วนย่อยของแม่แบบที่นำกลับมาใช้ใหม่ได้ด้วย snippet แล้วแสดงผลได้ทุกที่
{#snippet} และ {@render} เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สนิปเป็ต
สนิปเป็ตคือส่วนย่อยของแม่แบบที่นำกลับมาใช้ใหม่ได้ใน Svelte 5 ซึ่งคล้ายกับฟังก์ชันเรนเดอร์หรือสล็อตที่มีชื่อ
กำหนดสนิปเป็ต
ใช้ {#snippet name(args)}...{/snippet}
{#snippet greeting(name)}
<p>Hello, {name}!</p>
{/snippet}เรนเดอร์สนิปเป็ต
ใช้ {@render name(args)} เพื่อเรียกใช้งาน
{@render greeting("Ada")}พารามิเตอร์ของสนิปเป็ต
สนิปเป็ตรับอาร์กิวเมนต์ได้เหมือนฟังก์ชัน และการเรนเดอร์จะส่งอาร์กิวเมนต์เหล่านั้นเข้าไป
การนำกลับมาใช้ใหม่
กำหนดเพียงครั้งเดียว แล้วเรนเดอร์ได้หลายครั้งด้วยอาร์กิวเมนต์ที่แตกต่างกัน
{@render greeting("Ada")}
{@render greeting("Bea")}แทนที่การเขียนซ้ำ
สนิปเป็ตช่วยลดการทำซ้ำในคอมโพเนนต์ที่มีมาร์กอัปจำนวนมาก
กำหนดภายในคอมโพเนนต์
สนิปเป็ตอยู่ภายในมาร์กอัปของคอมโพเนนต์ ไม่ได้อยู่ใน JS
ขอบเขต
สนิปเป็ตสามารถอ้างอิงตัวแปรในขอบเขตของคอมโพเนนต์ที่ครอบอยู่ได้
ส่งเป็นพร็อพส์
สามารถส่งสนิปเป็ตเป็นพร็อพส์ไปยังคอมโพเนนต์อื่น เพื่อให้ประกอบส่วนต่าง ๆ ได้อย่างยืดหยุ่น
สิ่งทดแทนสล็อต
สนิปเป็ตเป็นแนวคิดทั่วไปของสล็อต ซึ่งยืดหยุ่น ประกอบใช้ร่วมกัน และกำหนดชนิดข้อมูลได้มากกว่า
TypeScript
ชนิดข้อมูลของสนิปเป็ตจะอนุมานจากพารามิเตอร์และชนิดข้อมูลที่ส่งคืน
ตรวจสอบความเข้าใจ
คุณจะเรนเดอร์สนิปเป็ตได้อย่างไร
สรุปทบทวน
สนิปเป็ตคือส่วนย่อยของแม่แบบที่รับพารามิเตอร์ กำหนดด้วย {#snippet} และเรียกใช้ด้วย {@render}
คำถามที่พบบ่อย
บทเรียน “{#snippet} และ {@render}” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “{#snippet} และ {@render}” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “{#snippet} และ {@render}”
กำหนดส่วนย่อยของแม่แบบที่นำกลับมาใช้ใหม่ได้ด้วย snippet แล้วแสดงผลได้ทุกที่ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “{#snippet} และ {@render}” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- $props() สำหรับพร็อพส์ที่ระบุชนิด
- {#snippet} และ {@render}
- ส่ง Snippet เป็นพร็อพส์
- Snippet ค่าเริ่มต้นและแบบระบุชื่อ