Global Event Bus: There is a various way to communicate between Vue component. Props is one of them which is used to communicate from parent component to child component.
But As your application increases in complexity, It becomes a tedious process to pass props down and down and down to child components. So, here we will discuss Event bus.
Here, you can see a live demo on Global Event Bus
You will learn about passing data from parent component to child component using the event bus after completion of the tutorial.
What is EventBus?
Event Bus is easy and quick way to pass data between
Vue.js components
. It is one of the best solutions for small scale to medium scale web application because it can pass data from one component to another component even components are located in the tree structure rather than props.
#1: Create a new Vue project
Here, we are using Vue CLI to create a new Vue project so, first of all install Vue CLI globally by the following command
1 |
npm install -g @vue/cli |
Let’s create a new Vue project by the following command
1 |
vue create event-bus-demo |
#2: Configure Event Bus
To make use of an event bus, we first need to initialize it in main.js like following
1 2 |
import Vue from 'vue' Vue.prototype.$eventBus = new Vue(); |
Here, We have imported Vue and assigned the instance of Vue to eventBus as globally. Now any component can emit an event and also other components can listen for that event using this event bus.
#3: Create a Emit Component
To Emit event data we have created a component which can emit data through event bus.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<template> <div class="row"> <div class="container"> <div> <center> <h5>Article</h5> </center> </div> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input id="title" type="text" class="validate" v-model="article.title"> <label for="title">Title</label> </div> </div> <div class="row"> <div class="input-field col s12"> <textarea id="description" class="materialize-textarea" data-length="120" v-model="article.description"></textarea> <label for="description">Description</label> </div> </div> <button class="btn btn-block waves-effect waves-light submit" type="button" name="action" @click="submit()">Emit Data</button> </div> </div> </div> </template> <script> export default { data() { return { article: { title: '', description: '' } } }, methods: { submit() { this.$eventBus.$emit('emitted-data', this.article); this.article = {}; } } } </script> <style scoped> </style> |
So, In Above component, We take title and description as input from users and call a submit() method which will emit an event called emitted-data along with a payload data whenever users click the button.
#4: Create Listener Component
To listen to emitted data via event bus create a listener component and write the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<template> <div class="container"> <table class="table centered"> <tbody> <tr> <th width="50%" style="text-align: center">Title</th> <th width="50%" style="text-align: center">Description</th> </tr> <tr v-if="title || description"> <td>{{ title }}</td> <td>{{ description }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { title: '', description: '' } }, mounted() { this.$eventBus.$on('emitted-data', ({ title, description }) => { this.title = title; this.description = description }) } } </script> <style scoped> </style> |
In Above component, We have created a mounted() method which listens for event called emitted-data using eventBus and show the data which is emitted from parent component.
#5: Register Both components
Register both previously created components in App.vue file like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<template> <div> <nav> <div class="container"> <div class="nav-wrapper"> <ul class="right"> <li> <a href="https://www.google.com" target="_blank" class="github"><i class="fa fa-github"></i></a> </li> </ul> </div> </div> </nav> <home-component></home-component> <br> <h5>Listening Component</h5> <listener-component></listener-component> <footer class="page-footer"> <div class="footer-copyright"> <div class="container"> <span>© 2018</span> <a href="https://artixun.com" target="_blank" style="color:white;text-decoration:none">Artixun Softwares.</a> </div> </div> </footer> </div> </template> <script> import HomeComponent from './components/HomeComponent.vue' import ListenerComponent from './components/ListenerComponent.vue' export default { name: 'app', components: { HomeComponent, ListenerComponent } } </script> |
Now, App.vue component is loaded first when we run Vue project so, we have registered those two components in App.vue file.
Finally, We have completed
Event bus demo
in straight forward steps. I hope you have learned from this tutorial. Thank you.