📮 Props di Vue.js

Props (property) adalah cara utama untuk mengirim data dari komponen parent (induk) ke komponen child (anak). Props bersifat satu arah (one-way), artinya child hanya bisa menerima, bukan mengubah nilai props secara langsung.

---

📦 1. Contoh Dasar Props

Komponen Anak: HelloUser.vue

<template>
  <p>Halo, {{ name }}!</p>
</template>

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

Komponen Parent:

<template>
  <HelloUser name="Andi" />
</template>

<script>
import HelloUser from './HelloUser.vue';

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

---

🧠 2. Props Bersifat Read-Only

Jika kamu mencoba mengubah nilai prop di child:

this.name = 'Baru'; // ❌ akan muncul warning!

Gunakan data lokal untuk menyalin props jika perlu:

data() {
  return {
    localName: this.name
  };
}

---

✅ 3. Validasi Props

Vue mendukung validasi props berdasarkan:

• Tipe data

• Wajib/tidaknya

• Default value

• Fungsi validator

Contoh:

props: {
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 0
  },
  email: {
    type: String,
    validator: value => value.includes('@')
  }
}

---

✏️ 4. Binding Dinamis

Props bisa diisi secara dinamis menggunakan v-bind atau shorthand :.

<HelloUser :name="userName" />

data() {
  return {
    userName: 'Dina'
  };
}

---

🧩 5. Boolean Props

Vue otomatis mengenali boolean props saat digunakan tanpa value.

<my-button primary />

props: {
  primary: Boolean
}

---

📋 6. Default Value vs Required

Properti	Fungsi
required: true	Wajib diisi oleh parent
default	Nilai default jika tidak diisi
Kedua opsi ini tidak boleh bertentangan — sebaiknya gunakan salah satu.

📌 Kesimpulan

• Props adalah mekanisme komunikasi satu arah dari parent ke child.

• Props bersifat read-only di child component.

• Gunakan validasi props untuk menjaga integritas data.

• Jangan modifikasi nilai prop secara langsung.