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});
}
}