Get on the Event Bus: Vue.js

Getting on the event bus bandwagon may sound like a bad idea, you can look up articles with Event Bus in the title and easily find articles that conjure up scary phrases like “anti-pattern” and “avoid at all costs”. Vue.js comes with a built in Event Bus system that really can work wonders if you need to communicate pieces of data across an entire application of uncoupled components.

That’s not to say that there aren’t pitfalls — but all of JavaScript is kind of akin to Indiana Jones running through the temple dodging arrows, gigantic rolling stones, and spike filled pits, right? A few of the disadvantages to note are that you really never know which component is sending the event, since they are sent through the channel. Also, anyone can emit events over that channel without restriction.

JavaScript

You can read other articles to further your understanding of life cycles, async data, etc. This article is designed to get you up and running using the awesome abilities of Vue’s Event Bus system.

To start, let’s imagine we have a component, that has some sort of data (in this case a click counter). We want to trigger an emit event in the component that can be utilized globally throughout our app — with no dependency of parent/child state of the components.

Image for post
Image for post
A component in need of a bus (for demonstration purposes, a very simple example).

Next up — we need to create the EventBus. This is as simple as creating a new Vue instance which will magically give access to Vue’s internal event bus system.

Image for post
Image for post
EventBus.js (could be housed in any folder you choose, I tend to organize this as a plugin/global component).

After that strenuous coding task — we can implement the EventBus in our ComponentToEmitEvent component. To do that we will import our EventBus and then handle the emit event inside of the click handler in the component.

Changes to the ComponentToEmitEvent.vue component. Imported the EventBus and utilized a global channel to send the event (in this case the click counter data) over the airwaves for other components to subscribe to.

So right now, we have an EventBus that is ready to ride, and a component that is ready to get on… we just need a destination. The beauty of the EventBus is that it doesn’t really matter where we are going. Let’s imagine up some completely unrelated portion of the application that needs access to our super important highly time sensitive click count data.

Image for post
Image for post
This component uses the EventBus to get the number of clicks sent on the ‘global-channel-for-event’.

And just like that we have completed the pipeline. By importing the EventBus into our component using EventBus.$on(...),our unrelated component (and you can tell by the component name that it is completely unrelated!) is now hooked into the channel 'global-channel-for-event'and ready to spend its days on the couch watching the clicks go by, ready to tell anyone who will listen how many it has seen.

A few key notes for the road before you grab the wheel of the EventBus and strike out on your own to learn more about this pretty neat Vue ability.

If you only want to listen to a single emission of an event, then you can pass once in place of on during the EventBus subscription… like so —

Image for post
Image for post

If you wish to stop listening after a certain point you could use —

Image for post
Image for post

EventBus could have more than one channel, unlike the TV in the 50’s. If you wish to unsubscribe to all channels from the EventBus you can use EventBus.$off() without passing any arguments.

About Me

I work for Orange Bees, an enterprise software engineering company in Greenville, SC, as a Frontend Software Engineer. I am experienced with Angular, React, and Vue.js.
You can find me on LinkedIn.

Software Developer | Orange Bees Software Solutions http://www.orangebees.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store