Props adalah data yang dikirim komponen induk ke komponen anak, mirip argumen yang dikirim ke function. Di pelajaran sebelumnya, tiga <MenuItem /> semuanya "Nasi Goreng". Props yang membuat tiap salinan punya isinya sendiri. Bayangin nota pesanan Warung Bu Sri yang dicetak kosong: "Selamat datang, ____!". Notanya sama untuk semua pembeli, kasir tinggal mengisi namanya. Kadang di sudutnya sudah tercetak salam bawaan, dan kasir boleh menimpanya dengan salam lain. Komponen adalah nota cetaknya, prop adalah isian kosongnya, dan nilai bawaan adalah salam yang sudah tercetak.
🧪 Tebakan cepat: komponen
Sapaanmenampilkan<p>{pesan}, {nama}!</p>, denganpesanpunya nilai bawaan"Selamat datang"dannamagak punya. Induknya cuma menulis<Sapaan />, tanpa mengirim apa-apa. Yang tampil error,Selamat datang, !, atauSelamat datang, undefined!? Jawabannya ada di bagian "Prop yang gak dikirim".
Mendeklarasikan prop dengan export let
Di Svelte 4, prop ditulis sebagai variabel dengan kata export di depannya. Ini Sapaan.svelte:
<script>
export let nama
export let pesan = "Selamat datang"
</script>
<p>{pesan}, {nama}!</p>
export let namamembuat propnama. Gak ada nilai awal, jadi induknya diharapkan selalu mengirimnya. Prop seperti ini disebut prop wajib.export let pesan = "Selamat datang"membuat proppesandengan nilai bawaan (default). Kalau induknya gak mengirimpesan, yang dipakai"Selamat datang".exportdi sini bukan export modul JavaScript. Svelte meminjam kata itu untuk berarti "variabel ini diisi dari luar".- Tanpa
export,let namacuma variabel biasa milik komponen itu, dan induknya gak bisa mengisinya.
Mengirim prop dari induk
Di komponen induk, prop dikirim seperti atribut HTML:
<script>
import Sapaan from "./Sapaan.svelte"
</script>
<Sapaan nama="Budi" />
<Sapaan nama="Sari" pesan="Apa kabar" />
| Ditulis induk | Tampil |
|---|---|
<Sapaan nama="Budi" /> |
Selamat datang, Budi! |
<Sapaan nama="Sari" pesan="Apa kabar" /> |
Apa kabar, Sari! |
- Baris pertama gak mengirim
pesan, jadi nilai bawaannya muncul. Baris kedua mengirimpesan, dan nilai itu menimpa nilai bawaannya. - Nilai dalam tanda kutip selalu string. Angka, variabel, dan ekspresi dikirim lewat kurung kurawal.
Sekarang kartu menu warung bisa beda-beda. MenuItem.svelte menerima dua prop:
<script>
export let nama
export let harga
</script>
<h3>{nama}</h3>
<p>Rp {harga.toLocaleString("id-ID")}</p>
<MenuItem nama="Nasi Goreng" harga={15000} />
<MenuItem nama="Mie Ayam" harga={12000} />
<MenuItem nama="Es Teh" harga={5000} />
Tiga kartu, tiga isi: Nasi Goreng Rp 15.000, Mie Ayam Rp 12.000, Es Teh Rp 5.000. harga={5000} mengirim angka. harga="5000" mengirim string, dan toLocaleString gak memformat string, jadi yang tampil Rp 5000, bukan Rp 5.000.
Prop yang gak dikirim
Induk menulis <Sapaan />. Ini yang terjadi:
| Svelte 4 | Svelte 5 | |
|---|---|---|
| Tampil | Selamat datang, undefined! |
Selamat datang, ! |
| Console (mode dev) | <Sapaan> was created without expected prop 'nama' |
gak ada warning |
Gak ada error. pesan memakai nilai bawaannya, sedangkan nama jadi undefined, dan Svelte 4 menampilkannya sebagai tulisan undefined. Itu jawaban tebakannya. Warning-nya cuma muncul di mode dev, saat npm run dev. Build produksi diam saja.
Prop yang hilang bisa lebih parah dari tulisan undefined. <MenuItem nama="Es Teh" /> tanpa harga membuat harga.toLocaleString(...) gagal dengan TypeError: Cannot read properties of undefined (reading 'toLocaleString'), dan aplikasinya berhenti di error itu.
Latihan kedua sengaja dijalankan tanpa induk yang mengirim apa pun. Jadi paragrafnya menampilkan Selamat datang, undefined!, dan itu benar: yang diperiksa adalah nilai bawaan Selamat datang yang benar-benar tampil.
Spread: kirim semua sekaligus
Kalau datanya sudah ada di satu objek, kirim semua isinya dengan spread:
<script>
import Sapaan from "./Sapaan.svelte"
const pelanggan = { nama: "Sari", pesan: "Apa kabar" }
</script>
<Sapaan {...pelanggan} />
{...pelanggan} sama dengan menulis nama="Sari" pesan="Apa kabar". Tiap properti objek jadi satu prop dengan nama yang sama. Kalau nama variabelnya sama dengan nama prop, ada juga singkatan seperti atribut: <Sapaan {nama} /> sama dengan <Sapaan nama={nama} />.
Svelte 5: $props
Di Svelte 5 dengan runes, prop diambil dari $props():
<script>
let { nama, pesan = "Selamat datang" } = $props()
</script>
<p>{pesan}, {nama}!</p>
- Satu baris destructuring menggantikan dua
export let. Nilai bawaan ditulis dengan=di dalamnya. - Cara induk mengirim prop sama persis:
<Sapaan nama="Budi" />. export letdan$props()gak boleh dicampur. Komponen yang memakai rune menolakexport letdengan compile errorlegacy_export_invalid.- Di Svelte 4, prop yang gak dideklarasikan bisa dibaca lewat
$restProps. Di Svelte 5 caranyalet { nama, ...sisanya } = $props().
Latihan pelajaran ini memeriksa export let, jadi di editor latihan tulis gaya Svelte 4.
⚠️ Jebakan yang sering ketemu
- Lupa
export.let namabiasa gak bisa diisi dari luar. Induk mengirimnama="Budi", tapi yang tampil tetapundefined, dan Svelte 4 memberi warning<Sapaan> was created with unknown prop 'nama'. Latihan memeriksaexport let. - Mengetik nama langsung di anak.
<h2>Halo, Budi!</h2>gak membaca prop, jadi semua salinan menyapa Budi. Tulis<h2>Halo, {nama}!</h2>. - Angka dalam tanda kutip.
harga="5000"mengirim string. Kirim angka denganharga={5000}. - Mencampur gaya dua versi.
export letdi komponen yang memakai$props()atau rune lain ditolak compiler. Pilih salah satu.
TL;DR: Prop adalah data dari induk ke anak. Di Svelte 4 ditulis export let nama (wajib, tanpa nilai awal) dan export let pesan = "Selamat datang" (dengan nilai bawaan yang dipakai saat induk gak mengirimnya). Induk mengirim seperti atribut: <Sapaan nama="Budi" /> untuk string, harga={5000} untuk angka, atau {...pelanggan} untuk semua isi objek sekaligus. Prop wajib yang gak dikirim tampil sebagai undefined di Svelte 4 (kosong di Svelte 5), dengan warning di mode dev, dan bisa bikin TypeError kalau dipakai sebagai objek. Di Svelte 5 caranya let { nama, pesan = "Selamat datang" } = $props(), dan gak boleh dicampur dengan export let.
