Cara Menguasai Props, Emit, dan Slot di Vue.js dengan Mudah

Woi, para web enthusiast! Pernah nggak sih ngerasa pusing pas mau kirim data antar komponen di Vue.js? Rasanya kayak lagi LDR-an, mau ngirim pesan tapi malah bikin bug sana-sini. Tenang, hari ini kita bakal spill rahasia biar komunikasi komponen lo jadi super smooth pake trio maut: Props, Emit, dan Slot. Skuy kita bahas!

1. Props: Cara Ngirim Data dari Bapak ke Anak

Props itu ibarat lo ngasih uang jajan ke adek lo. Data ngalir satu arah (dari Parent ke Child). Lo cuma bisa baca, nggak boleh asal ubah datanya di dalam child.

Contoh Kode:

<!-- ParentComponent.vue -->
<template>
  <UserProfile name="Budi Santoso" :age="20" />
</template>

<!-- ChildComponent.vue -->
<script setup>
defineProps({
  name: String,
  age: Number
})
</script>

Tips: Selalu pake validasi tipe data! Jangan males nulis type, biar aplikasi lo nggak gampang error pas ada data nggak jelas masuk.

2. Emit: Cara Anak 'Curhat' ke Bapaknya

Kalau props buat ngirim data ke bawah, emit kebalikannya. Ini cara komponen anak ngasih tau bapaknya kalau ada aksi (misal: klik tombol). Ini komunikasi event-driven yang rapi banget.

Contoh Kode:

<!-- ChildComponent.vue -->
<button @click="$emit('updateStatus', 'Lulus')">Klik Gue!</button>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @update-status="handleStatus" />
</template>

Tips: Gunakan kebab-case buat nama event di template (contoh: update-status) supaya konsisten sama konvensi HTML.

3. Slots: Modifikasi Layout Biar Makin Aesthetic

Nah, kalau Props sama Emit itu buat data, Slot itu buat template. Bayangin lo punya card komponen, tapi isinya mau beda-beda di tiap halaman. Daripada bikin komponen baru, mending pake Slot.

Contoh Kode:

<!-- BaseCard.vue (Parent) -->
<div class="card">
  <slot name="header">Default Header</slot>
  <slot>Konten utama di sini</slot>
</div>

<!-- Penggunaan -->
<BaseCard>
  <template #header><h1>Halo Dunia!</h1></template>
  <p>Isi konten yang fleksibel banget.</p>
</BaseCard>

Kenapa Harus Paham Ketiganya?

Kalau lo udah jago nge-mix ketiganya:

• Props bikin data lo terstruktur (Read-only).
• Emit bikin aksi komponen jadi reaktif.
• Slot bikin komponen lo reusable dan fleksibel abis.

Kesimpulan

Ngoding Vue.js itu soal flow. Jangan dipersulit dengan global state (seperti Pinia/Vuex) kalau sebenernya cuma butuh komunikasi Parent-Child. Kuasain Props, Emit, dan Slot, dijamin kodingan lo makin clean, gampang di-maintenance, dan pastinya makin vibes banget pas di-review sama senior.

Skuy, langsung praktek sekarang! Ada pertanyaan? Tulis di kolom komentar ya, ngab!