Pass data between components using Vue.js Event Bus (original) (raw)

Last Updated : 26 Mar, 2021

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∗∗emit, and 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 emitandprops,thiswillbealongprocessoffirstpassingthedataandeventupthroughthetreeusingemit and props, this will be a long process of first passing the data and event up through the tree using emitandprops,thiswillbealongprocessoffirstpassingthedataandeventupthroughthetreeusingemit 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 `

Component1.vue

Component2.vue

event-bus.js

import Vue from 'vue';

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

export default EventBus;

`

Output: