VueJS Eventbus: Easy way to pass data between components
Eventbus is typically a mechanism that makes it possible to have communication between different components. These components can be present at any level of component hierarchy in your project.
In general terms an event can be considered as an action that occurs as a result of some trigger, either by program or by an internal code block. The concept of event-driven programming has gained a lot of popularity these days and is widely implemented in the backend systems examples of which are rabbitMQ, Apache Kafka, etc. Similarly the concept of eventbus can be used in frontend Single Page Applications (SPAs) as well where you have many components in your project.
In the case of VueJS two components communicate with each other via props and event. The component communication happens at two different levels at hierarchy i.e parent to child component and child to parent component.
Example: Let’s consider the following example.
Component A lies at the top level of hierarchy thus it is considered as a parent component for the components B and C. The data passing/communication between parent to child happens via props and vice versa happens via event emitted from the child component.
However there might be a situation as follows:
Example 2: Component E needs to pass data to component A
This is possible using normal event communication such as emitting event from E to C and then from C to A. The same goes for data passing from component A to E. The typical flow can be as follows: Passing data in props from A to C and then further from C to E. But this way of communication is not really an optimal solution.
To overcome such a situation and avoid rewriting event and props we make use of Eventbus in Vue. Because of the simplicity of the Vue framework, creating an eventbus is fairly simple.
As it can be seen, Eventbus is nothing but a new instance of Vue. I would be demonstrating the code in Nuxt JS which is a great framework for developing large scale vue applications.
This code snippet has to placed in the plugins directory and registered in the plugins object in nuxt.config.js file
Now in order to pass data from Component E to component A we need to use the eventbus $emit method in component E to emit the event and $on method in component A to listen to the event.
As can be seen the event name should be same for both the $emit() and $on() methods to work properly.
The same can be followed to pass data from parent component A to child component E. In this case parent would emit the event using the method $emit(‘eventName’, data) and the child can listen to this event via $on(‘eventName’, () =>{ … }) method.
This process of passing data between components can be very helpful when you have many components in your large scale application. State management is a great way to have a centralised store for application data but when it comes to some simple data passing between components at different levels using Eventbus can be an optimal choice.
