Introduction to Global Event Bus

A global event bus, while discouraged at certain instances is a very beautiful and easy way to share data across various Vue based components. This approach has been there are various frameworks namely Angular also had this approach using RootScope in Angular 1. You can compare it Global Event Bus to that if you are familiar with Angular 1. Now let’s understand how the Global Event Bus works.

It works on the principle of Publish/Subscribe methodology commonly known as Pub/Sub. This Pub/Sub mechanism was also talked about in the previous post where we were solely concentrating upon the deletion method of the ToDoList which made us use this approach. In this post, we will just concentrate on the usage of it and then we will move our attention towards child parent relationship and data exchange in Vue. So let’s get started with this process and build things out using the Global Event Pattern.

This entire approach can be considered as a design pattern because if you look at the things around its more of an architectural solution. I will be using the plain old javascript and make two components and show how this Event Bus works.

Steps to plan and Create Global Event Bus

In order to plan this out. Let’s have a look at the diagram below and try to understand what’s exactly happening in this particular case.

Global Event Bus Architecture

Global Event Bus Architecture

We can derive the following points from the above diagram.

  1. There is one Global Event Bus
  2. All components Subscribe to it
  3. All components also publish to it and the subscribing components get the update
  4. To sum up. All components are capable of publishing event to the BUS which is then subscribed by the other component and then the components subscribing to it gets updated.

Code based Implementation

In code implementation, we will keep it very small and concise. We will break it into two parts where we will show two components as well as the code that generates the Event Bus.

Creation of Global Event Bus

This is the simplest part of the problem. Global Event Bus is nothing but a simple Vue component. The code goes as follows:-

Now, this particular Bus works with two methods $on and $emit . One helps in creating an event that is emitted, as the name suggests it must be $emit and the other is for subscription $on. So the template of these goes as follows:-

Now let’s create the HTML and the JavaScript code in order to bring this to a conclusive end.

Component Creation

The Template for the component will look as follows

Here you can see that we have created two different components and one component updates the other using the Global Event Bus. Note that it’s not a nested component, so they are siblings rather than being parent child.

JavaScript Code for the Components goes here.

From the above code, you can see that the first component listens to a specific event called updateTitle and this is being triggered as the component instantiates or you can say as the component is created. On the other hand, we have another component which has a button which emits an event when someone clicks on it. This leads to the emitted event to be listened by the subscribed component. This gives rise to a Pub/Sub model which persists between the siblings and is so very easy to implement. Let have a look at the full functionality by looking at the GIF below. Alternatively, you can have a look at the JSFiddle Example for the same.

Global Event Bus Using VueJS

Global Event Bus Using VueJS

You can also test it out here itself using the JSFiddle here.

Conclusion

Global Event Bus can solve numerous issues at times when the cross component interaction becomes difficult. This is indeed an easy way to communicate and can also help in order to update the DOM dynamically.

Now if you guys have not got a chance to have a look at other Vue.js tutorials, you can alternatively have a look at the entire Vue.js section. Here goes the list of the entire Vue.js Tutorials.


Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This