Get on the Event Bus: Vue.js

John Baldwin
Jun 20 · 4 min read

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.

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.

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.

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 —

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

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.

John Baldwin

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade