Snippet Default dan Bernama
Sediakan snippet cadangan dan beri nama pada beberapa slot snippet dalam sebuah komponen.
Snippet Default dan Bernama adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Bawaan
Konten yang ditempatkan di antara tag komponen menjadi cuplikan bawaan yang dapat diakses melalui children.
<Card>
<p>Inside the card</p>
</Card>Di Dalam Komponen
Render konten bawaan dengan properti children.
let { children } = $props();
<div class="card">
{@render children()}
</div>Cuplikan Bernama
Teruskan beberapa cuplikan berdasarkan nama sebagai properti.
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>Menerima Cuplikan Bernama
Deklarasikan setiap cuplikan bernama sebagai properti.
let { header, body } = $props();
{@render header()}
{@render body()}Konten Cadangan
Gunakan konten cadangan bawaan dengan kondisional biasa.
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}Keamanan Tipe
Berikan tipe secara eksplisit pada setiap parameter cuplikan untuk dukungan IDE.
Menggantikan Slot Bernama
Cuplikan menggantikan pola slot bernama dari Svelte 4 dengan kemampuan yang lebih lengkap.
Konten Bawaan
Cuplikan tidak memiliki cadangan bawaan; gunakan {#if} untuk membuatnya.
Pola Komposisi
Gabungkan cuplikan bawaan dan cuplikan bernama untuk desain komponen tanpa tampilan.
Kiat Migrasi
Saat bermigrasi, ubah setiap slot bernama menjadi properti cuplikan bernama.
Inferensi TS
Svelte 5 membuat tipe Snippet secara otomatis dari properti komponen Anda.
Pemeriksaan Singkat
Apa yang menggantikan slot bernama di Svelte 5?
Ringkasan
Konten bawaan menggunakan cuplikan children; cuplikan bernama merupakan properti eksplisit yang dirender dengan @render.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Snippet Default dan Bernama” gratis?
Ya — teks lengkap “Snippet Default dan Bernama” 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 Default dan Bernama”?
Sediakan snippet cadangan dan beri nama pada beberapa slot snippet dalam sebuah komponen. 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 4 dari 4.
Berapa lama pelajaran “Snippet Default dan Bernama” 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