Vue 3 menghapus $on dan $emit hanya di gunakan untuk memberikan trigger pada parent component, bagimana solusinya?

$onpada Vue JS versi 3 ini telah di hapus oleh pihak Vue dan $emit hanya di gunakan untuk memberikan trigger pada parent component , namun untuk yang menggunakan Vue versi 2 masih bisa digunakan dengan baik. $on dan $emit adalah fitur event emitter yang berfungsi sebagai Event dan Listerner yang bisa di gunakan untuk mengirim dan menerima Event pada Vue JS. $on digunakan untuk menerima Event dan $emit digunakan untuk mengirim Event. kita bisa mengirim Event dan menerima Event meskipun berbeda component.

berikut ini contoh penggunaan $on dan $emit pada vue 2 yang biasa saya gunakan untuk menerima dan mengirim event antar komponen.

Menerima Event

mounted(){
  //menerima event
  this.$root.$on('terimaEvent',function(param){
    console.log(param);
  });
}

Mengirim Event

methods:{
  kirimEvent(){
    this.$root.$emit('terimaEvent',{name:'nama saya});
  }
}

Lalu bagaimana dengan Vue 3?

pada vue 3 kita tidak bisa menggunakan cara di atas karena pihak Vue sudah menghapus fungsi tersebut pada Vue 3. untuk bisa menggunakan Event Emitter di Vue 3 kita bisa menggunakan pihak ketiga seperti “mitt” dan “tiny-emitter”.

saya akan mencontohkan menggunakan “tiny-emitter” untuk menggantikan $on dan $emit pada Vue 3

Silahkan install “tiny-emitter” dengan memasukan perintah

npm install tiny-emitter --save

penggunaanya adalah seperti berikut ini:

Menerima Event

import emitter from 'tiny-emitter/instance';
.....
.....
mounted(){
  //menerima event
  emitter.on('terimaEvent',function(param){
    console.log(param);
  });
}

Mengirim Event:

import emitter from 'tiny-emitter/instance';
.....
.....
methods:{
  kirimEvent(){
    emitter.emit('terimaEvent',{name:'nama saya});
  }
}