Komponen & Props

Halo teman-teman, selamat datang kembali di pembelajaran kita tentang Vue.js. Nah, hari ini kita akan masuk ke salah satu konsep inti dari Vue, yaitu Komponen dan Props.

Bayangkan kalian sedang membangun sebuah aplikasi besar. Kira-kira kalau satu file isinya ribuan baris kode, nyaman nggak? Tentu nggak ya. Nah, di sinilah konsep komponen hadir untuk menyelamatkan kita.

Apa Itu Komponen di Vue?

Komponen itu seperti potongan-potongan kecil dari UI yang bisa dipakai ulang. Misalnya kita punya tombol, kartu produk, atau form login, semua itu bisa kita bungkus jadi satu komponen, lalu tinggal kita pakai berkali-kali di mana saja.

Komponen Global vs Lokal

Nah, di Vue ada dua jenis cara kita mendaftarkan komponen: global dan lokal.

1. Komponen Global

Komponen global bisa dipakai di mana saja, di semua file Vue kita, tanpa perlu di-import lagi satu per satu.

Biasanya kita daftarkan di file main.js seperti ini:

import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

const app = createApp(App)
app.component('BaseButton', BaseButton) // <- Ini global

app.mount('#app')

Setelah itu, kita bisa pakai <BaseButton /> di mana pun, tanpa perlu import lagi.

2. Komponen Lokal

Kalau komponen lokal, artinya kita hanya bisa pakai di dalam komponen tertentu saja. Kita import dan daftarkan secara manual di components.

<script>
import BaseButton from './BaseButton.vue'

export default {
  components: {
    BaseButton
  }
}
</script>

Jadi mana yang lebih bagus? Jawabannya: tergantung. Kalau sering dipakai dan sifatnya umum (seperti tombol standar), pakai global. Tapi kalau spesifik untuk halaman tertentu, cukup lokal saja supaya nggak membebani aplikasi.

Props: Kirim Data dari Parent ke Child

Sekarang kita masuk ke bagian props. Props ini kayak jalan masuk data dari parent ke child.

Misalnya kita punya komponen UserCard.vue:

<template>
  <div>
    <h3>{{ name }}</h3>
    <p>{{ email }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'email']
}
</script>

Lalu kita pakai di parent-nya:

<UserCard name="Andi" email="[email protected]" />

Nah, props ini hanya satu arah, dari parent ke child. Child gak boleh seenaknya ubah props yang diterima. Kalau mau mengubahnya, harus bikin salinan dulu di data() atau computed.

Emit: Kirim Event dari Child ke Parent

Kalau tadi kita kirim data dari atas ke bawah (props), sekarang gimana kalau kita ingin ngabarin dari bawah ke atas? Misalnya child mau bilang: "Hei, aku udah klik tombolnya nih!"

Nah, di sinilah kita pakai $emit.

Contoh: di komponen BaseButton.vue

<template>
  <button @click="$emit('clicked')">Klik Saya</button>
</template>

Lalu di parent-nya:

<BaseButton @clicked="handleClick" />

Dan handleClick() bisa kita definisikan di methods parent:

methods: {
  handleClick() {
    console.log('Tombol diklik!')
  }
}

Kesimpulan

• Komponen = potongan UI yang bisa dipakai ulang
• Global = bisa dipakai di mana saja, Lokal = khusus untuk 1 komponen saja
• Props = kirim data dari parent ke child
• Emit = kirim event dari child ke parent