Meneruskan Props dari Komponen Induk
Berikan nilai kepada props komponen anak di dalam template induk.
Meneruskan Props dari Komponen Induk 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.
Impor Komponen Anak
Gunakan import ES standar di bagian atas komponen induk untuk memasukkan komponen anak.
<script>
import Greeting from "./Greeting.svelte";
</script>Gunakan Tag
Render komponen anak dengan menulis tag menggunakan nama yang diawali huruf kapital.
<Greeting />Teruskan Nilai Statis
Teruskan string literal dengan atribut yang diapit tanda kutip.
<Greeting name="Ada" />Teruskan Nilai Dinamis
Teruskan ekspresi JS dengan membungkus nilainya dalam kurung kurawal.
<Greeting name={userName} />Singkatan dengan Nama Sama
Jika properti dan variabel memiliki nama yang sama, gunakan singkatan {name}.
<Greeting {name} />Beberapa Properti
Gabungkan properti statis, dinamis, dan singkatan dalam urutan apa pun.
<Card title="Tasks" {items} count={items.length} />Penyebaran Properti
Sebarkan objek berisi properti dengan sintaks {...obj}.
<Card {...cardProps} />Properti Kondisional
Gabungkan operator ternary untuk memberikan nilai bersyarat.
<Button label={isLoading ? "Saving..." : "Save"} />Singkatan Boolean
Teruskan atribut boolean tanpa nilai untuk menetapkannya ke true.
<Toggle disabled />Fungsi sebagai Properti
Anda dapat meneruskan referensi fungsi sebagai properti untuk panggilan balik.
<Modal onClose={() => (open = false)} />Properti Objek
Teruskan objek secara utuh ketika banyak nilai yang saling terkait perlu dikirim bersama.
<UserCard user={currentUser} />Pemeriksaan Singkat
Bagaimana cara meneruskan variabel sebagai properti?
Ringkasan
Impor komponen, gunakan tag, lalu teruskan properti dengan literal, ekspresi, singkatan, atau penyebaran.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Meneruskan Props dari Komponen Induk” gratis?
Ya — teks lengkap “Meneruskan Props dari Komponen Induk” 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 Props dari Komponen Induk”?
Berikan nilai kepada props komponen anak di dalam template induk. 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 “Meneruskan Props dari Komponen Induk” 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
- Mendeklarasikan Props dengan export let
- Meneruskan Props dari Komponen Induk
- Nilai Props Bawaan
- Meneruskan Props dengan $$props dan $$restProps