Let’s imagine you are creating an enterprise application using vue.js and Laravel. This means, you’ll have a large collection of components in different levels of the project. Now, you need to implement a proper communication mechanism between the components.

Cannot we achieve this using "props" in vue? data flow through “props”  always happens from parent to child components But what if we need communication happens with some other component which is not a child component or child to parent data flow? Things are getting complicated there. But not anymore. Let’s take advantage of the event mechanism provided by vue.js.

There are many ways to solve this problem. I’ll show you a simple and effective mechanism that I used in a recent project. We’ll be communicating with the components through a global event bus. Now what’s an event bus? Yeah that’s right. Just like the name indicates, it transport data between components and provide a means for communication between any components. Let’s see how we can create a global event bus in vue.

In main.js file, lets start by defining a global event bus as follows:

Vue.prototype.$eventBus = new Vue(); // Global event bus

new Vue({
  el: '#app',
  router: Router,
  template: '<App/>',
  store: store,
});

by declaring the event bus In this way above, we minimize the need to export the event bus in each and every component.
Now, from any component, we can access and emit an event to the bus as follows:

methods: {

login(){
     // logout logic
     // on success 
     this.$eventBus.$emit('logged-in');

  }
}

Now, in any the other components, you can listen to the event and add handlers to them. It has to be done in the “created” life cycle hook of the vue instance. Also, you need to make sure that the event listener is turned off before you destroy the component.

data(){
    return {
        //data
    }
},
created() {
    this.$eventBus.$on('logged-in', this.getCurrentUser);
},
beforeDestroy() {
    this.$eventBus.$off('logged-in');
},
methods: {
   getCurrentUser(){
     // Get current user information
    }

}

This event bus can be listened from any component in your application and the handlers can be assigned to perform any actions based on the event emitted.

Let's see another example below:

<!--name.vue-->

<template>
    <div>
        <h1>Hello World, I'm {{ name }}</h1>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                name: 'Foo'
            }
        },

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

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

        methods: {

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

        }
    }
</script>

Second component:

<!--change-name.vue-->
<template>
    <div>
        <input type="text" v-model="newName">
        <button @click.prevent="changeName()"></button>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                newName: ''
            }
        },
        
        methods: {
            changeName()
            {
                this.$eventBus.$emit('change-name', this.newName);
            }
        }
    }
</script>

In this example, when you type and press the button, an event is emitted in to the global bus. A listener from the first component listen for the event and changes the name with the new name entered.

If you have any other questions, experience or insights on "Vue.js global event bus and component communication" please feel free to leave your thoughts in the comments bellow which might be helpful to someone some day!.