Meneruskan Snippet sebagai Props
Terima nilai snippet sebagai props untuk membangun API komponen yang sangat fleksibel.
Meneruskan Snippet sebagai Props adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Cuplikan sebagai Properti
Cuplikan dapat diteruskan ke komponen anak seperti nilai lainnya.
Mendefinisikan dan Meneruskan
Definisikan secara langsung di induk, lalu rujuk berdasarkan nama.
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />Menerima di Komponen Anak
Deklarasikan cuplikan sebagai properti bertipe.
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}Pola Properti Render
Ini menggeneralisasi properti render bergaya React. Induk mengendalikan cara anak dirender.
Kustomisasi
Induk yang berbeda dapat menyediakan cuplikan yang berbeda untuk menyesuaikan tata letak sepenuhnya.
Properti Cuplikan Bertipe
Dengan TypeScript, berikan tipe pada parameter cuplikan agar komponen anak mendapatkan pelengkapan otomatis.
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();Cuplikan Opsional
Properti cuplikan dapat bersifat opsional; render hanya jika diberikan.
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}Cuplikan Children
Cuplikan bawaan tersedia sebagai children di dalam $props().
let { children } = $props();
{@render children()}Kekuatan Komposisi
Properti cuplikan menjadi dasar bagi pustaka UI tanpa tampilan dan yang dapat dikomposisikan.
Impor TypeScript
Impor tipe Snippet dari svelte untuk pengetikan yang tepat.
import type { Snippet } from "svelte";Dibandingkan dengan Slot
Properti cuplikan lebih fleksibel daripada slot: dapat menerima parameter dan dirender secara kondisional.
Pemeriksaan Singkat
Bagaimana cara menerima cuplikan sebagai properti?
Ringkasan
Teruskan cuplikan sebagai properti untuk membalik kendali: induk menyediakan logika pemerenderan, sedangkan anak memanggilnya melalui @render.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Meneruskan Snippet sebagai Props” gratis?
Ya — teks lengkap “Meneruskan Snippet sebagai Props” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Meneruskan Snippet sebagai Props”?
Terima nilai snippet sebagai props untuk membangun API komponen yang sangat fleksibel. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Meneruskan Snippet sebagai Props” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- $props() untuk Props Bertipe
- {#snippet} dan {@render}
- Meneruskan Snippet sebagai Props
- Snippet Default dan Bernama