ส่ง Snippet เป็นพร็อพส์
รับค่า snippet เป็นพร็อพส์เพื่อสร้างส่วนประกอบที่มีส่วนเชื่อมต่อ API ยืดหยุ่นสูง
ส่ง Snippet เป็นพร็อพส์ เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สนิปเป็ตในพร็อพส์
สามารถส่งสนิปเป็ตไปยังคอมโพเนนต์ลูกได้เหมือนค่าประเภทอื่น
กำหนดและส่งต่อ
กำหนดสนิปเป็ตแบบอินไลน์ในคอมโพเนนต์แม่ แล้วอ้างอิงด้วยชื่อ
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />รับในคอมโพเนนต์ลูก
ประกาศสนิปเป็ตเป็นพร็อพส์ที่มีชนิดข้อมูล
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}รูปแบบพร็อพส์สำหรับเรนเดอร์
แนวคิดนี้เป็นรูปแบบพร็อพส์สำหรับเรนเดอร์แบบเดียวกับ React โดยทั่วไป คอมโพเนนต์แม่จะควบคุมวิธีเรนเดอร์คอมโพเนนต์ลูก
การปรับแต่ง
คอมโพเนนต์แม่แต่ละตัวสามารถส่งสนิปเป็ตที่แตกต่างกัน เพื่อปรับแต่งเค้าโครงได้อย่างสมบูรณ์
พร็อพส์สนิปเป็ตที่มีชนิดข้อมูล
เมื่อใช้ TypeScript ให้กำหนดชนิดข้อมูลของพารามิเตอร์สนิปเป็ต เพื่อให้คอมโพเนนต์ลูกมีการเติมโค้ดอัตโนมัติ
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();สนิปเป็ตที่ไม่บังคับ
พร็อพส์สนิปเป็ตอาจเป็นตัวเลือกได้ โดยเรนเดอร์เฉพาะเมื่อมีการส่งมา
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}สนิปเป็ตเนื้อหาลูก
สนิปเป็ตเริ่มต้นจะแสดงเป็น children ใน $props()
let { children } = $props();
{@render children()}พลังของการประกอบ
พร็อพส์สนิปเป็ตเป็นรากฐานของไลบรารีส่วนติดต่อผู้ใช้แบบไร้ส่วนแสดงผลและแบบประกอบได้
การนำเข้า TypeScript
นำเข้าชนิดข้อมูล Snippet จาก svelte เพื่อกำหนดชนิดข้อมูลอย่างถูกต้อง
import type { Snippet } from "svelte";เปรียบเทียบกับสล็อต
พร็อพส์สนิปเป็ตยืดหยุ่นกว่าสล็อต เพราะรับพารามิเตอร์และเรนเดอร์ตามเงื่อนไขได้
ตรวจสอบความเข้าใจ
คุณจะรับสนิปเป็ตเป็นพร็อพส์ได้อย่างไร
สรุปทบทวน
ส่งสนิปเป็ตเป็นพร็อพส์เพื่อกลับด้านการควบคุม คอมโพเนนต์แม่จัดเตรียมตรรกะการเรนเดอร์ ส่วนคอมโพเนนต์ลูกเรียกใช้ผ่าน @render
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “ส่ง Snippet เป็นพร็อพส์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ส่ง Snippet เป็นพร็อพส์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ส่ง Snippet เป็นพร็อพส์”
รับค่า snippet เป็นพร็อพส์เพื่อสร้างส่วนประกอบที่มีส่วนเชื่อมต่อ API ยืดหยุ่นสูง คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ส่ง Snippet เป็นพร็อพส์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- $props() สำหรับพร็อพส์ที่ระบุชนิด
- {#snippet} และ {@render}
- ส่ง Snippet เป็นพร็อพส์
- Snippet ค่าเริ่มต้นและแบบระบุชื่อ