Vue Event Bus to communicate sibling components

In this communication method, Vue.js instance can emit events from one component and another component can listen it.
This is very useful when you develop large Vue application because there are lot of components at different level. So when you change the data on one component other components should be notified

Files needed in this examaple
main.js
App.js
CompA.vue
CompB.vue

When I click the button on CompA incremented value will be shown in CompB

Add this line of code to main.js
Vue.prototype.$eventHub = new Vue();

First you create these functions in CompB because you are going to listen the events emited from CompA

 created() {
        this.$root.$on('change-name', this.changeName)
 },

 beforeDestroy() {
        this.$root.$off('change-name');
 },

In the method section of the CompA you can add the following code

changeName(name) {
// name will be automatically transported to the parameter.
this.name = name;
},

Then you can fire the events from CompB
this.$root.$emit(‘change-name’,”Mike Tyson”);