Di beberapa contoh sebelumnya, saya telah menunjukkan cara penggunaan event $emit antara parent dan child component di Vue.js. Pada pembahasan kali ini, saya akan menerapkan sebuah teknik bernama EventBus agar event $emit dapat dilakukan antar komponen yang tidak saling terkait (parent tidak sama).

Untuk keperluan latihan kali ini, buka kembali file latihan010.html yang telah kita buat sebelumnya, lalu copy paste baris kode yang ada di dalamnya ke file baru latihan013.html. Lakukan hal yang sama dengan file Javascript-nya.

Hanya dibutuhkan empat langkah untuk menggunakan teknik EventBus ini pada aplikasi Vue. Pertama, buat sebuah class baru berisi instance Vue kosong, misal kita beri nama EventBus, kemudian sisipkan di baris paling atas file latihan013.js (pemilihan nama class bebas) :

const EventBus = new Vue();

Vue.component('KomponenCard', {
    props: ['nama', 'whatsapp'],

Kedua, sisipkan baris kode berikut :

<button type="button" class="btn btn-danger" @click="tampilkanAlert">Popup Alert</button>

di dalam elemen <div class="modal-footer"></div>

<div class="modal-footer">
    <button type="button" class="btn btn-primary" @click="$emit('tutup')">Tutup Modal</button>
    &nbsp;
    <button type="button" class="btn btn-danger" @click="tampilkanAlert">Popup Alert</button>
</div>

Ketiga, tambahkan method tampilkanAlert ke dalam KomponenModal :

methods: {
    tampilkanAlert() {
        EventBus.$emit('alert');
    }
}

Keempat, sekaligus yang terakhir, tambahkan hook created berikut di blok kode inisiasi Vue :

created() {
    EventBus.$on('alert', () => alert('Hala Madrid !!!') );
}

Perhatikan, di elemen <div class="modal-footer"></div> terdapat dua button dengan penerapan $emit yang berbeda. Button Tutup Modal menggunakan $emit('tutup') untuk mengirimkan notifikasi event ke parent, komunikasi yang terjadi terbatas hanya antara parent dan child terkait saja. Sedangkan button Popup Alert, mengirim notifikasi event ke class EventBus melalui method tampilkanAlert, komunikasi tidak lagi terbatas antara parent dan child.

Seluruh komponen nantinya dapat melakukan event $emit ke class EventBus, meskipun komponen tersebut tidak memiliki keterkaitan parent-child sama sekali. Class EventBus akan melakukan listening setiap event yang dikirim oleh $emit melalui EventBus.$on(), lalu menjawabnya dengan menampilkan alert('Hala Madrid !!!').

komunikasi komponen yang tidak saling terkait dengan eventbus vue.js