Komponen & Props di Vue

Sekarang kita masuk ke konsep yang benar-benar jadi “game changer” saat membangun aplikasi: komponen dan props.

Bayangkan kalau semua tampilan kita tulis dalam satu file—panjang, sulit dibaca, dan susah dirawat. Di sinilah Vue menawarkan solusi dengan pendekatan berbasis komponen: memecah UI menjadi bagian-bagian kecil yang rapi dan bisa digunakan ulang.

Apa Itu Komponen?

Komponen bisa dianggap sebagai blok penyusun tampilan.

Contohnya:

• Tombol
• Card produk
• Navbar
• Form login

Daripada menulis ulang elemen yang sama berkali-kali, kita cukup buat satu komponen, lalu gunakan di berbagai tempat.

Intinya:

Tulis sekali, pakai berkali-kali.

Cara Menggunakan Komponen

Di Vue, ada dua pendekatan umum untuk menggunakan komponen: global dan lokal.

Komponen Global

Komponen global bisa digunakan di seluruh aplikasi tanpa perlu import berulang.

Biasanya didaftarkan di file utama (misalnya app.js atau main.js):

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

const app = createApp(App)

app.component('BaseButton', BaseButton)

app.mount('#app')

Setelah itu, kita bisa langsung pakai di mana saja:

<BaseButton />

Cocok untuk:

• Komponen umum (button, input, modal)
• UI yang sering dipakai di banyak halaman

Komponen Lokal

Komponen lokal hanya tersedia di file tertentu saja. Kita harus import secara manual.

<script setup>
import BaseButton from '@/Components/BaseButton.vue'
</script>

<template>
  <BaseButton />
</template>

Cocok untuk:

• Komponen spesifik
• Tidak digunakan di banyak tempat

Best practice: Gunakan lokal dulu. Kalau ternyata sering dipakai, baru dipertimbangkan jadi global.

Props: Mengirim Data ke Komponen

Sekarang kita masuk ke komunikasi antar komponen.

Props digunakan untuk mengirim data dari parent ke child.

Contoh komponen UserCard.vue:

<script setup>
defineProps({
  name: String,
  email: String
})
</script>

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

Lalu dipakai di parent:

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

Alurnya: Parent → kirim data → Child menerima via props

Catatan penting: Props bersifat read-only di child. Tidak boleh langsung diubah.

Emit: Mengirim Aksi ke Atas

Kalau props itu dari atas ke bawah, maka emit kebalikannya: dari child ke parent.

Biasanya digunakan untuk memberi tahu parent bahwa sesuatu terjadi.

Contoh di BaseButton.vue:

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

Di parent:

<BaseButton @clicked="handleClick" />

Lalu di script parent:

function handleClick() {
  console.log('Button diklik!')
}

Alurnya: Child → emit event → Parent menangani

Gambaran Sederhana

Supaya lebih kebayang, bayangkan seperti ini:

• Komponen → seperti Lego (bagian kecil yang bisa disusun)
• Props → data yang dikirim ke Lego
• Emit → sinyal dari Lego ke pembuatnya

Ringkasan

• Komponen membantu kita memecah UI jadi lebih kecil dan reusable
• Global → bisa dipakai di mana saja
• Lokal → hanya untuk komponen tertentu
• Props → kirim data dari parent ke child
• Emit → kirim event dari child ke parent

Kesimpulan

Dengan memahami komponen dan props, kita sudah mulai masuk ke cara berpikir modular dalam frontend development.

Ke depannya, aplikasi kita tidak lagi berupa file besar yang sulit diatur, tapi kumpulan komponen kecil yang saling terhubung dengan rapi dan jelas.

Dan di sinilah Vue benar-benar terasa powerful