VueJS - Communication between sibling components in VueJs 2.0


Communication between components  in VueJS :

 1)       In VueJs 2.0 communication between components using a single event hub

  -          Define centralized event hub.



 const eventHub = new Vue() // Single event hub
 // Distribute to components using global mixin
 Vue.mixin({
  data: function () {
   return {
    eventHub: eventHub
   }
  }
 })
  -          Now in your component you can emit events with



 this.eventHub.$emit('update', data)
  -          And to listen you do



      this.eventHub.$on('update', data => {
  // do your thing
      })

2)    Using $root Vue instance as global Event Hub :

      UserComponent: 



   this.$root.$emit('eventing', data);

     ProfileComponent: 



   mounted() {
    this.$root.$on('eventing', data => {
        console.log(data);
    });
   }