Cara Mudah Menggunakan Props di Vue.js untuk Pemula

Halo gaes! Balik lagi nih. Pernah nggak sih kalian ngerasa bingung pas mau ngoper data dari komponen utama (Parent) ke komponen kecil (Child) di Vue.js? Rasanya kayak mau nge-chat crush tapi takut salah paham, ya kan? Tenang, kuncinya ada di Props.

Props itu ibarat "surat cinta" dari Parent ke Child. Datanya read-only (nggak boleh diubah seenaknya sama si Child) biar aliran data tetap searah dan nggak bikin aplikasi kalian jadi chaos. Yuk, kita spill cara mainnya!

Apa Itu Props?

Secara teknis, Props adalah custom attributes yang bisa kita pasang di komponen. Bayangin kalian punya komponen CardUser, nah kalian butuh kirim data nama dan umur dari App.vue. Nah, itulah saatnya kita pakai Props!

Langkah Praktis Implementasi

1. Di Komponen Child

Kalian harus deklarasiin dulu apa aja yang bakal diterima. Kalau pakai <script setup>, caranya gampang banget:

<!-- UserCard.vue -->
<script setup>
defineProps({
  username: String,
  age: {
    type: Number,
    required: true,
    default: 18
  }
})
</script>

<template>
  <div class="card">
    <h2>Halo, {{ username }}!</h2>
    <p>Umur kamu sekarang {{ age }} tahun ya.</p>
  </div>
</template>

2. Di Komponen Parent

Sekarang, tinggal kirim datanya. Skuy, perhatiin cara manggilnya:

<!-- App.vue -->
<script setup>
import UserCard from './UserCard.vue'
</script>

<template>
  <UserCard username="Budi Santoso" :age="25" />
</template>

Tips Biar Vibes Coding Kamu Makin Pro

• Gunakan Prop Validation: Jangan asal terima data. Pakai type, required, dan default biar aplikasi kalian lebih robust dan nggak gampang error.
• One-Way Data Flow: Inget ya, Props itu immutable di Child. Kalau kalian butuh ubah datanya, mending pakai emit buat balik lapor ke Parent. Jangan bandel ngerubah props langsung di Child, nanti reaktivitas Vue jadi bingung!
• Kebab-case vs CamelCase: Pas ngirim di template (HTML), pakai kebab-case (contoh: user-name), tapi pas nerima di JS/Script, pakai camelCase (userName). Vue udah pinter kok, dia bakal nge-map otomatis!

Kesimpulan

Ngirim data pake props itu basic skill yang wajib banget kalian kuasai biar komponen kalian modular dan reusable. Kalau udah paham ini, project Vue kalian bakal jauh lebih rapi dan gampang di-maintenance. Skuy, langsung praktekin sekarang!