Slot Bawaan untuk Proyeksi Konten
Tempatkan elemen di dalam komponen untuk menerima konten anak apa pun.
Slot Bawaan untuk Proyeksi Konten adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Itu Slot
Slot memungkinkan komponen induk menyisipkan markup ke tempat tertentu dalam komponen anak.
Elemen slot
Di dalam komponen anak, letakkan tag <slot /> di tempat konten seharusnya muncul.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Gunakan dari Induk
Bungkus elemen anak di dalam tag komponen. Elemen tersebut muncul di tempat slot berada.
<Card>
<p>Hello inside the card!</p>
</Card>Kekuatan Komposisi
Pola ini memungkinkan Anda membuat kerangka tata letak yang dapat digunakan kembali, seperti kartu, modal, dan halaman.
Beberapa Elemen Anak
Elemen dalam jumlah berapa pun dapat mengisi slot bawaan.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Teks Biasa
Anda juga dapat meneruskan teks biasa sebagai konten slot.
<Button>Click me</Button>Konten Bersyarat
Gunakan {#if} di dalam komponen induk untuk memilih konten yang dimasukkan ke slot.
Slot Komponen
Konten slot dapat dengan bebas menyertakan komponen lain.
<Card>
<Avatar />
<Username />
</Card>Penataan Gaya
Konten dalam slot mempertahankan gaya komponen induk yang menuliskannya, bukan gaya komponen anak.
Tata Letak vs Logika
Slot adalah alat untuk tata letak dan komposisi, bukan mekanisme pengiriman data. Gunakan properti untuk data.
Titik Penyisipan Slot
Anda dapat memiliki beberapa posisi slot dalam satu komponen (bawaan + bernama).
Pemeriksaan Singkat
Di mana konten slot muncul?
Ringkasan
Gunakan <slot /> di komponen anak dan teruskan elemen anak di antara tag induk untuk menyisipkan konten.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Slot Bawaan untuk Proyeksi Konten” gratis?
Ya — teks lengkap “Slot Bawaan untuk Proyeksi Konten” 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 Bawaan untuk Proyeksi Konten”?
Tempatkan elemen di dalam komponen untuk menerima konten anak apa pun. 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 1 dari 4.
Berapa lama pelajaran “Slot Bawaan untuk Proyeksi Konten” 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