Slot Bernama dengan slot="name"
Tentukan beberapa titik penyisipan dalam komponen menggunakan slot bernama.
Slot Bernama dengan slot="name" 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.
Mengapa Slot Bernama
Komponen sering memerlukan beberapa titik penyisipan, misalnya bagian atas, isi, dan bagian bawah.
Mendefinisikan Slot Bernama
add atribut name pada elemen slot di komponen anak.
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>Mengisi Slot Bernama
Dari komponen induk, tandai elemen dengan atribut slot="name".
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>Mencampur Slot Bawaan dan Bernama
Konten tanpa atribut slot mengisi slot bawaan. Konten bernama masuk ke slot bernamanya.
Tidak Bergantung pada Urutan
Urutan di komponen induk tidak penting. Setiap slot dicocokkan berdasarkan namanya.
Beberapa Elemen per Slot
Bungkus beberapa elemen dalam satu wadah dengan atribut slot untuk mengirimkan semuanya ke slot yang sama.
Bagian Atas Bersyarat
Gunakan {#if} di komponen induk untuk mengisi slot bernama secara opsional.
Tata Letak Umum
Pola ini sangat cocok untuk tata letak dengan bagian atas, bilah samping, bagian utama, dan bagian bawah.
Komponen Formulir
Komponen formulir mungkin mendefinisikan slot untuk awalan, akhiran, teks bantuan, dan sebagainya.
Dokumentasi Mandiri
Nama slot menjelaskan API komponen. Pilih nama deskriptif seperti title atau actions.
Pembantu TypeScript
Anda dapat memberikan tipe pada slot menggunakan generik khusus $$Slots dalam berkas Svelte TypeScript.
Pemeriksaan Singkat
Bagaimana cara menargetkan slot bernama?
Ringkasan
Definisikan beberapa <slot name="..."> di komponen anak dan targetkan dengan slot="..." pada elemen induk.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Slot Bernama dengan slot="name"” gratis?
Ya — teks lengkap “Slot Bernama dengan slot="name"” 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 “Slot Bernama dengan slot="name"”?
Tentukan beberapa titik penyisipan dalam komponen menggunakan slot bernama. 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 “Slot Bernama dengan slot="name"” 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
- Slot Bawaan untuk Proyeksi Konten
- Slot Bernama dengan slot="name"
- Konten Cadangan Slot
- Memeriksa Konten Slot dengan $$slots