Pass data between components using Vue.js Event Bus

Component communication in Vue.js can become complicated and messy at times using $emit and props. In real-world applications where the Component tree is nested and big, it is not convenient to pass data using this method as it will only increase the complexity of the application and make debugging very tedious. This is where an event bus comes into the picture.

An Event Bus is nothing but a global Vue instance that is imported by the components involved in communication and passing data. It makes use of the $on, $emit, and $off properties of the Vue object to emit out events and pass on data. An Event Bus provides a very simple and elegant solution to the complex $emit and prop chain which can be very hard to track down while testing and debugging. It acts as a global intermediate for all the components involved to emit out and listen to events and execute methods accordingly.

Syntax:

There is no special syntax for an Event Bus as it is just an instantiation of the Vue class.

const EventBus = new Vue();

Working: 

Consider this simple component tree where we need to share data between the black and the green components. Using $emit and props, this will be a long process of first passing the data and event up through the tree using $emit and then down the tree using props.

However, using an event bus, this can be carried out in a very simple and easy manner.

Example: We will use the same example we have used to illustrate $emit and props here, however, this time using an Event Bus. It is a very basic webpage that displays how many times a button has been clicked. For this, we have 2 components:

• Component1: Displays the number of times the button in component 2 has been clicked.
• Component2: A button which when clicked upon increases a counter.

App.js

<template>
<div>
  <Component1></Component1>
  <Component2></Component2>
</div>
</template>

<script>
  import Component1 from './components/Component1.vue'
  import Component2 from './components/Component2.vue'

  export default {
    name: 'App',
    components: {
      Component1,Component2
    }
  }
</script>

Component1.vue

<template>
  <div class="component1">
    <h1>You have clicked {{ labeltext }} times</h1>
  </div>
</template>

<script>
  import EventBus from '../event-bus';

  export default {
    name: "Component1",
    data() {
      return {
        labeltext: 0,
      };
    },
    methods: {
      change_n(n) {
        this.labeltext = n;
      },
    },
    created() {
        // Sets up the Event Bus listener using
        // the custom event name and assosciates
        // it with a component method.
        EventBus.$on("change_n", this.change_n);
      },
    destroyed() {
        // Removes Event Bus listener upon removal
        // of template from DOM.
        EventBus.$off("change_n", this.change_n);
      },
  };
</script>

<style scoped>
  .component1 {
    display: block;
    background-color: green;
    height: 15em;
    text-align: center;
    color: white;
    padding-top: 5em;
  }
</style>

Component2.vue

<template>
  <div class="component2">
    <button @click="count">Click</button>
  </div>
</template>

<script>
  import EventBus from '../event-bus';

  export default {
    name: "Component2",
    data() {
      return {
        nclick : 0,
      };
    },
    methods: {
      count() {
        this.nclick += 1;
        // Emitting a custom-event via the Event Bus
        EventBus.$emit("change_n", this.nclick);
      },
    },
  };
</script>

<style scoped>
  .component2 {
    display: block;
    background-color: grey;
    height: 15em;
    text-align: center;
    padding-top: 5em;
  }
</style>

event-bus.js

import Vue from 'vue';

// Create a new Vue instance and export it
const EventBus = new Vue();

export default EventBus;

Output: