Pernah kepikiran gimana caranya dua komponen Vue bisa "ngobrol" satu sama lain? Misalnya, kamu punya komponen Parent yang menyimpan data nama pengguna, lalu komponen Child-nya butuh data itu buat ditampilkan. Atau sebaliknya — komponen Child perlu "teriak" ke Parent bahwa ada tombol yang diklik. Di sinilah props emits vue 3 jadi pahlawannya. Konsep komunikasi komponen Vue adalah fondasi dari hampir semua aplikasi Vue yang modular. Tanpa memahami ini, kamu bakal kesulitan membangun UI yang terstruktur rapi. Yuk, kita bedah tuntas — mulai dari analogi sederhana sampai contoh kode yang bisa langsung kamu praktikkan!
Apa Itu Props dan Emits dalam Komunikasi Komponen Vue?
Props = jalur data dari Parent → Child (satu arah, read-only)
Emits = mekanisme Child untuk memberi sinyal ke Parent bahwa sesuatu terjadi
Bayangkan kamu kerja di restoran. Parent adalah manajer yang memberikan instruksi ke Child (pelayan). Manajer memberi tahu pelayan: "Meja 5 pesan nasi goreng" — ini adalah Props. Ketika pelayan sudah selesai, dia balik dan bilang ke manajer: "Meja 5 sudah selesai!" — ini adalah Emits.
Komunikasi selalu punya arah yang jelas: data turun (Props), sinyal naik (Emits). Inilah yang membuat props emits vue 3 sangat elegan — tidak ada data yang berubah tanpa kendali.
Vue menggunakan konsep "one-way data flow" — data hanya mengalir dari Parent ke Child lewat Props. Kalau Child mencoba mengubah prop secara langsung, Vue akan melempar warning di console. Kenapa? Supaya bug lebih mudah dilacak!
Cara Kerja Props: Kirim Data dari Parent ke Child
Props adalah cara komponen Parent "menitipkan" data ke komponen Child. Dalam komunikasi komponen Vue, props harus dideklarasikan di sisi Child terlebih dahulu, baru bisa diisi datanya dari Parent. Ikuti langkah-langkah berikut:
Gunakan defineProps() di dalam <script setup>.
<script setup> // Deklarasi props yang diterima dari Parent const props = defineProps({ nama: String, umur: Number, aktif: Boolean }) </script> <template> <div> <p>Nama: {{ props.nama }}</p> <p>Umur: {{ props.umur }} tahun</p> <p>Status: {{ props.aktif ? 'Aktif' : 'Nonaktif' }}</p> </div> </template>
Di template Parent, tulis nama prop sebagai atribut pada tag komponen Child. Gunakan v-bind atau shorthand : untuk binding dinamis.
<script setup> import ChildCard from './ChildCard.vue' import { ref } from 'vue' const pengguna = ref({ nama: 'Budi Santoso', umur: 25, aktif: true }) </script> <template> <ChildCard :nama="pengguna.nama" :umur="pengguna.umur" :aktif="pengguna.aktif" /> </template>
Validasi membuat bug lebih mudah ketahuan. Gunakan objek dengan type, required, dan default.
const props = defineProps({ nama: { type: String, required: true // wajib diisi }, umur: { type: Number, default: 18 // nilai default jika tidak diisi }, aktif: { type: Boolean, default: false } })
Nama prop mengikuti konvensi camelCase di JavaScript (namaLengkap), tapi saat menggunakannya di template HTML, kamu bisa pakai kebab-case (nama-lengkap). Vue otomatis mengenalinya sebagai hal yang sama.
Cara Kerja Emits: Sinyal dari Child ke Parent
Sekarang, bagaimana kalau Child perlu memberitahu Parent? Misalnya saat user mengklik tombol di dalam komponen Child, dan Parent perlu tahu kejadian itu. Di sinilah emits vue 3 berperan — Child "memancarkan" event, dan Parent "mendengarkan" event tersebut.
Gunakan defineEmits() untuk mendaftarkan event yang akan dipancarkan.
<script setup> // Deklarasi event yang bisa dipancarkan const emit = defineEmits(['tombol-diklik', 'data-dikirim']) function handleKlik() { // Pancarkan event + kirim data (payload) emit('tombol-diklik', { waktu: new Date().toLocaleString() }) } </script> <template> <button @click="handleKlik" style="background:#6366f1;color:white;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;"> Klik Saya! </button> </template>
Gunakan v-on atau shorthand @ untuk mendengarkan event dari Child.
<script setup> import TombolAksi from './TombolAksi.vue' import { ref } from 'vue' const pesanLog = ref('') function tangkapEvent(data) { pesanLog.value = `Tombol diklik pada: ${data.waktu}` } </script> <template> <TombolAksi @tombol-diklik="tangkapEvent" /> <p>Log: {{ pesanLog }}</p> </template>
Emit bisa mengirim data tambahan (payload) sebagai argumen kedua dan seterusnya. Parent menerimanya sebagai parameter di fungsi handler. Ini memungkinkan komunikasi dua arah yang terstruktur tanpa merusak prinsip one-way data flow!
Props vs Emits: Perbandingan Lengkap untuk Komunikasi Komponen Vue
| Aspek | ⬇️ Props | ⬆️ Emits |
|---|---|---|
| Arah Aliran | Parent → Child | Child → Parent |
| Fungsi | Kirim data/nilai | Pancarkan event/sinyal |
| API Vue 3 | defineProps() |
defineEmits() |
| Bisa Diubah? | ❌ Read-only di Child | ✅ Parent bebas merespons |
| Membawa Data? | Ya — data apapun | Ya — sebagai payload event |
| Konvensi Nama | camelCase (JS) / kebab-case (HTML) | kebab-case dianjurkan |
Jangan langsung mengubah nilai prop di dalam Child component! Jika butuh memodifikasi nilainya, buat variabel lokal baru dengan ref(props.namaProp) atau gunakan computed. Mengubah prop langsung = anti-pattern yang bikin debugging jadi mimpi buruk.
v-model di komponen kustom sebenarnya adalah kombinasi props + emits! Secara default, v-model pada komponen menggunakan prop bernama modelValue dan emit bernama update:modelValue. Ini adalah pola yang sangat umum untuk membuat input komponen yang reusable!
Rangkuman: Props & Emits — Fondasi Komunikasi Komponen Vue 3
Selamat! Kamu baru saja memahami salah satu konsep paling krusial dalam props emits vue 3. Berikut ringkasan yang perlu kamu ingat:
- Props = jalur data satu arah dari Parent ke Child. Dideklarasikan dengan
defineProps(). Selalu read-only di sisi Child. - Emits = mekanisme Child memberikan sinyal ke Parent. Dideklarasikan dengan
defineEmits(). Bisa membawa payload data. - Validasi props dengan
type,required,defaultadalah best practice yang wajib diterapkan. - Komunikasi komponen Vue yang baik membuat aplikasi lebih modular, mudah di-debug, dan scalable.
Artikel ini adalah bagian dari Seri Belajar Vue: Vue from Zero to Zorro — 16 artikel yang dirancang membawamu dari nol sampai jago Vue 3!
Kamu sedang membaca artikel ke-7 dari 16 artikel dalam seri Belajar Vue: Vue from Zero to Zorro. Ikuti seri lengkapnya untuk perjalanan belajar Vue 3 yang terstruktur dan menyeluruh!
No comments:
Post a Comment