The event bus / publish-subscribe pattern is a way of getting unrelated sections of your application to talk to each other.
The event system used in Vue components can be used in an event bus / publish-subscribe pattern.
Note: This tutorial is specific for Vue 2. In Vue 3, $on
, $off
, and $once
have been removed. External libraries that provide this functionality are recommended.
In this article, you will apply Vue’s powerful built-in event bus.
To complete this tutorial, you will need:
This tutorial was verified with Node v15.3.0, npm
v6.14.9, and vue
v2.6.11.
For the purpose of this tutorial, you will build from a default Vue project generated with @vue/cli
.
- npx @vue/cli create vue-event-bus-example --default
This will configure a new Vue project with default configurations: Vue 2
, babel
, eslint
.
Navigate to the newly created project directory:
- cd vue-event-bus-example
You will need to create the event bus and export it somewhere so other modules and components can use it. First, create a new file. Import the Vue library. Then, export an instance of it.
import Vue from 'vue';
export const EventBus = new Vue();
For this tutorial, the instance was set to the variable EventBus
.
What you are essentially getting is a component that is entirely decoupled from the DOM or the rest of your app. All that exists on it are its instance methods.
Now that you have created the event bus, you will need to import it into your components and call the same methods that you would use if you were passing messages between parent and child components.
Next, let’s apply EventBus.$emit()
.
Consider a scenario with a component that notifies the entire app of how many times it has been clicked whenever someone clicks on it.
Note: This example uses a single-file-component here, but you can use whatever method of creating components you would like.
Here is how you would go about implementing that using EventBus.$emit(channel: string, payload1: any, ...)
:
<template>
<button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>
<script>
import { EventBus } from '@/event-bus';
export default {
data() {
return {
clickCount: 0
}
},
methods: {
emitGlobalClickEvent() {
this.clickCount++;
EventBus.$emit('clicked', this.clickCount);
}
}
}
</script>
This code produces a button. Clicking on the button would send the event on a channel (clicked
) with a payload (clickCount
).
Modify App.vue
to use this component.
<template>
<div id="app">
<ClickCountButton></ClickCountButton>
</div>
</template>
<script>
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
</script>
Next, let’s apply EventBus.$on
.
Now, any other part of your app can import the event bus and listen on the clicked
channel using EventBus.$on(channel: string, callback(payload1,...))
.
Apply this to your application by modifying App.vue
:
<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
const clickHandler = function(clickCount) {
console.log(`The button has been clicked ${clickCount} times!`)
}
EventBus.$on('clicked', clickHandler);
</script>
This code creates an event listener for clicked
and logs a message to the console with the number of times the button has been clicked.
Note: If you would only like to listen for the first emission of an event, you can use EventBus.$once(channel: string, callback(payload1,...))
.
Next, let’s apply EventBus.$off
.
You can unregister the handler from the clicked
channel using EventBus.$off(channel: string, callback(payload1,...))
.
Apply this to your application by modifying App.vue
:
<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
const clickHandler = function(clickCount) {
console.log(`The button has been clicked ${clickCount} times!`)
}
EventBus.$on('clicked', clickHandler);
EventBus.$off('clicked', clickHandler);
</script>
By providing an event and a callback, EventBus.$off
will only remove the listener for this specific callback.
Note: You could also remove all listeners for a particular event using EventBus.$off('clicked')
with no callback argument.
And if you really need to remove every single listener from EventBus
, regardless of channel, you can call EventBus.$off()
with no arguments at all.
Now, you have utilized .$emit
, .$on
, and .$off
.
In this tutorial, you used Vue’s powerful built-in event bus to listen for a clicked
event and log a message with the click count. This was achieved by utilizing .$emit
, .$on
, and .$off
.
If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Why not just use
$root
rather than employing a whole new instance of vue? Is it not safe or something?Thank you, this is great!