Vue.js global event not working

Question

I've got

<component-one></component-one> <component-two></component-two> <component-three></component-three>

Component two contains component three.

Currently I emit an event in <component-one> that has to be caught in <component-three>.

In <component-one> I fire the event like this:

this.$bus.$emit('setSecondBanner', finalBanner);

Then in <component-three> I catch it like this:

mounted() { this.$bus.$on('setSecondBanner', (banner) => { alert('Caught'); this.banner = banner; }); },

But the event is never caught!

I define the bus like this (in my core.js):

let eventBus = new Vue(); Object.defineProperties(Vue.prototype, { $bus: { get: () => { return eventBus; } } });

What could be wrong here? When I check vue-dev-tools I can see that the event has fired!

I can't replicate this, here's my working fiddle: jsfiddle.net/kr315jto Are you emitting the event after the instance has been mounted? — craig_h
– craig_h, Commented Dec 8, 2017 at 11:38
It is not an error, it is perfectly normal behaviour - it is how the events works. — user6748331
– user6748331, Commented Dec 8, 2017 at 11:42

Niklesh Raut · Accepted Answer · 2017-12-08 12:12:47Z

This is the working example for vue1.

Object.defineProperty(Vue.prototype, '$bus', {	get() {	return this.$root.bus;	} }); Vue.component('third', {	template: `<div> Third : {{ data }} </div>`, props:['data'] }); Vue.component('second', {	template: `<div>Second component <third :data="data"></third></div>`,	ready() {	this.$bus.$on('setSecondBanner', (event) => {	this.data = event.data;	});	},	data() {	return {	data: 'Defautl value in second' }	} }); Vue.component('first', {	template: `<div>{{ data }}</div>`,	ready() {	setInterval(() => {	this.$bus.$emit('setSecondBanner', {	data: 'Bus sending some data : '+new Date(),	});	}, 1000);	},	data() {	return {	data: 'Defautl value in first' }	} }); var bus = new Vue({}); new Vue({	el: '#app',	data: {	bus: bus	} });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script> <div id="app"> <second></second> <first></first> </div>

Sergi Pasoevi · Accepted Answer · 2017-12-08 11:41:46Z

Have you tried registering the listener in created instead of mounted?

Also, why define the bus with defineProperties and not simply:

Vue.prototype.$bus = new Vue();

Collectives™ on Stack Overflow

Vue.js global event not working

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related