CODEWITHSUNDEEP
javascriptvue.js
Jenssen
Jenssen

Reputation: 1871

Vue.js global event not working

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!

Upvotes: 4

Views: 1203

Answers (2)

Niklesh Raut
Niklesh Raut

Reputation: 34914

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>

Upvotes: 2

Sergi Pasoevi
Sergi Pasoevi

Reputation: 2851

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

Upvotes: 1

Related Questions