Vuejs setting up event bus - events

Question

So in my root app.js i have
window.Vue = require('vue');
const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
const app = new Vue({
el: '#backend',
EventBus,
components: {
FirstComponent
}
});
Now in the first component
clickbtn(){
this.$bus.$emit('test', { "testval":"setting up event bus" })
}
components:{
ChildComponent //local component
}
Now on the child component
created(){
this.$bus.$on('test', ($event) => {
console.log('Test event triggered', $event)
})
}
Where am i going wrong in the setup since even console.log(this) doesnt have $bus in it.
I was following This to setup
I still would like to use $bus as it looks good and abit organized.How do i make it happen.

Answer 1

I usually do a separation with the EventBus.
eventbus.js
import Vue from 'vue';
export const EventBus = new Vue();
Then i simply do an import in every component that needs to listen for event. On bigger projects I would even create a events.js and eventListener.js file and then handle everything there.
With complete separation
eventbus.js
This will be our event bus and is used from all other places.
import Vue from 'vue';
export const EventBus = new Vue();
event.js
This file is basically a library of common events. This makes it easier to maintain.
import { EventBus } from './Eventbus.js';
import { Store } from './Store.js'; // If needed
class Event {
// Simple event
static showMessage(message) {
EventBus.$emit('showMessage', message);
}
}
eventlistener.js
Event listener for our common events. Again this makes it easier to maintain. This could be in the same event file, but I like the separation.
import { EventBus } from './Eventbus.js';
class EventListener {
// Simple event listener
static showMessage() {
EventBus.$on('showMessage', function() {
alert(message);
});
}
// Simple event listener with callback
static showMessage(callbackFunction) {
EventBus.$on('showMessage', callbackFunction);
}
}
ComponentA.vue
A random component. Imports the EventBus and Event collection as it is used somewhere in the vue component.
<template>
*SOME HTML*
</template>
<script>
import { Event } from 'event.js'
import { EventBus } from 'eventbus.js';
export default {
methods: {
throwAlert: function() {
Event.showMessage('This is my alert message');
}
}
}
</script>
ComponentB.vue
A random component. Imports the EventBus and EventListener collection as it is suppose to react on events on the eventbus.
<template>
*SOME HTML*
</template>
<script>
import { EventListener } from 'eventlistener.js'
import { EventBus } from 'eventbus.js';
export default {
mounted() {
// Will start listen for the event 'showMessage' and fire attached function defined in eventlistener.js
EventListener.showMessage();
// Will start listen for the event 'showMessage' and execute the function given as the 'callbackFunction' parameter. This will allow you to react on the same event with different logic in various vue files.
EventListener.showMessage(function(message) {
alert(message);
});
}
}
</script>