{#snippet} dan {@render}
Definisikan fragmen templat yang dapat digunakan ulang dengan snippet, lalu tampilkan di mana saja.
{#snippet} dan {@render} adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 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
Cuplikan adalah fragmen templat yang dapat digunakan kembali di Svelte 5, mirip dengan fungsi render atau slot bernama.
Mendefinisikan Cuplikan
Gunakan {#snippet name(args)}...{/snippet}.
{#snippet greeting(name)}
<p>Hello, {name}!</p>
{/snippet}Merender Cuplikan
Gunakan {@render name(args)} untuk memanggilnya.
{@render greeting("Ada")}Parameter Cuplikan
Cuplikan menerima argumen seperti fungsi; render meneruskan argumen tersebut.
Dapat Digunakan Kembali
Definisikan sekali, lalu render berkali-kali dengan argumen yang berbeda.
{@render greeting("Ada")}
{@render greeting("Bea")}Menggantikan Pengulangan
Cuplikan mengurangi duplikasi dalam komponen yang markup-nya banyak.
Didefinisikan dalam Komponen
Cuplikan berada di dalam markup komponen, bukan di dalam JS.
Cakupan
Cuplikan dapat merujuk variabel dalam cakupan komponen yang membungkusnya.
Diteruskan sebagai Properti
Cuplikan dapat diteruskan sebagai properti ke komponen lain untuk komposisi yang fleksibel.
Pengganti Slot
Cuplikan menggeneralisasi slot: lebih fleksibel, dapat dikomposisikan, dan bertipe.
TypeScript
Tipe cuplikan disimpulkan dari parameter dan tipe hasilnya.
Pemeriksaan Singkat
Bagaimana cara merender cuplikan?
Ringkasan
Cuplikan adalah fragmen templat berparameter. Definisikan dengan {#snippet}, lalu panggil dengan {@render}.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “{#snippet} dan {@render}” gratis?
Ya — teks lengkap “{#snippet} dan {@render}” 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 “{#snippet} dan {@render}”?
Definisikan fragmen templat yang dapat digunakan ulang dengan snippet, lalu tampilkan di mana saja. 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 2 dari 4.
Berapa lama pelajaran “{#snippet} dan {@render}” 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