Emitting Events — CompileDaily Study

Penjelasan

Kalau props mengalir SATU ARAH dari induk ke anak, emit adalah cara komponen anak "berbicara balik" ke induknya — didefinisikan lewat defineEmits([...]) di anak, dipicu dengan emit('namaEvent', data), lalu didengarkan induk lewat @namaEvent di tempat komponen anak dipakai.

Contoh Konsep

<!-- TombolSuka.vue -->
<script setup>
const emit = defineEmits(['disukai']);

function handleKlik() {
    emit('disukai', { waktu: new Date() });
}
</script>

<template>
    <button @click="handleKlik">Suka</button>
</template>

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

function handleDisukai(data) {
    console.log('Disukai pada:', data.waktu);
}
</script>

<template>
    <TombolSuka @disukai="handleDisukai" />
</template>

Praktikum

Buat komponen InputPencarian.vue dengan defineEmits(['cari']) yang men-emit event 'cari' berisi teks input saat tombol submit ditekan. Di App.vue, dengarkan event itu lewat @cari dan tampilkan hasilnya lewat console.log().

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Selalu DAFTARKAN dulu nama event yang mungkin di-emit lewat defineEmits(['namaEvent']) — meski secara teknis emit() tetap jalan tanpa didaftarkan, mendaftarkannya membuat Vue bisa validasi dan dokumentasi komponennya jadi lebih jelas untuk siapa pun yang memakainya nanti.