📢 Emits & Custom Events di Vue.js

Selain props untuk mengirim data dari parent ke child, Vue juga menyediakan custom events untuk komunikasi sebaliknya: child ke parent. Ini dilakukan dengan menggunakan $emit.

---

🔁 1. Alur Komunikasi

Parent (Induk) --> [props] --> Child (Anak) Child (Anak) --> [$emit] --> Parent (Induk)

---

📦 2. Contoh Sederhana

🧱 Komponen Anak: CounterButton.vue

<template>
  <button @click="handleClick">Tambah</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('increment');
    }
  }
}
</script>

🏗️ Komponen Parent

<template>
  <div>
    <CounterButton @increment="count++" />
    <p>Nilai: {{ count }}</p>
  </div>
</template>

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

export default {
  components: { CounterButton },
  data() {
    return {
      count: 0
    };
  }
}
</script>

---

🧠 3. Mengirim Data melalui Event

Kamu bisa mengirim data bersamaan dengan event:

Komponen Anak:

this.$emit('submit-name', this.name);

Komponen Parent:

<ChildForm @submit-name="handleSubmit" />

methods: {
  handleSubmit(name) {
    console.log('Nama dikirim dari child:', name);
  }
}

---

✏️ 4. Vue 3 — Emit Declaration (Opsional)

Jika kamu menggunakan Vue 3 + Composition API:

defineEmits(['submit-name'])

Atau:

const emit = defineEmits();
emit('submit-name', data);

---

💡 5. Penamaan Event

• Gunakan kebab-case saat emit ('update-value')

• Gunakan camelCase di method parent jika disukai (@updateValue)

• Hindari nama yang ambigu seperti change, click — gunakan nama spesifik

---

📋 6. Event Modifiers (Parent Side)

Vue mendukung event modifier saat menangkap event:

<child-component @submit.prevent="handleSubmit" />

📌 Kesimpulan

• Gunakan $emit untuk mengirim event dari child ke parent

• Sertakan payload jika ingin mengirim data

• Di parent, tangkap event menggunakan @eventName

• Ini adalah metode komunikasi satu arah dari anak ke induk