Props: Mengirim Data ke Komponen Anak
defineProps (bentuk array & objek), validasi tipe, required & default, aliran data satu arah, props dinamis, dan v-bind objek.
Komponen yang bisa dikonfigurasi
Komponen KartuProduk yang selalu menampilkan "Laptop" tidak berguna. Kita ingin memberinya nama dan harga berbeda tiap pemakaian. Itulah fungsi props: atribut khusus yang diterima komponen dari induknya, seperti argumen pada sebuah fungsi.
Mendeklarasikan props
<script setup>
// bentuk array (sederhana, tanpa validasi)
defineProps(['nama', 'harga'])
// bentuk objek (disarankan: ada tipe, required, default)
defineProps({
nama: { type: String, required: true },
harga: { type: Number, required: true },
stok: { type: Number, default: 0 },
tag: { type: Array, default: () => [] }, // objek/array: default berupa fungsi
})
</script>defineProps adalah compiler macro: tidak perlu diimpor. Props langsung bisa dipakai di template.
Jika ingin mengakses props di script, simpan hasilnya:
const props = defineProps({ nama: String })
console.log(props.nama)Mengirim props dari induk
<KartuProduk nama="Laptop" :harga="8000000" :stok="5" />
<KartuProduk v-for="p in produk" :key="p.id" v-bind="p" />| Penulisan | Arti |
|---|---|
nama="Laptop" | String literal |
:harga="8000000" | Ekspresi JS → angka (tanpa titik dua akan jadi string "8000000") |
:aktif="true" / aktif | Boolean (atribut tanpa nilai = true) |
v-bind="objek" | Kirim semua properti objek sebagai props |
Nama props di script ditulis camelCase (namaLengkap), tetapi di template induk boleh kebab-case (nama-lengkap="...").
Aliran data satu arah
Jangan ubah props di komponen anak! Props mengalir ke bawah (induk → anak). Jika anak butuh versi yang bisa diubah, salin ke state lokal atau buat computed. Jika anak ingin meminta perubahan, ia mengirim event ke induk (bab 13).
// salin sebagai nilai awal
const props = defineProps({ awal: Number })
const hitung = ref(props.awal)
// turunan dari props
const harga2x = computed(() => props.harga * 2)Validasi props
defineProps({
level: {
type: String,
validator: (v) => ['pemula', 'mahir'].includes(v),
},
umur: [Number, String], // beberapa tipe sekaligus
})Validasi hanya memunculkan peringatan di console (mode development); aplikasi tetap jalan.
Tipe yang didukung
String, Number, Boolean, Array, Object, Date, Function, Symbol, atau class buatan sendiri.
Kesalahan umum
- Mengirim angka tanpa titik dua:
harga="5000"menjadi string, padahal prop bertipe Number → peringatan. - Default untuk objek/array ditulis langsung (
default: []) — harus fungsi:() => []. - Mengubah
props.nama = ...→ peringatan "Attempting to mutate prop".