Global Event Bus Tutorial with Vue.js

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.

Content Index

#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

npm install -g @vue/cli

1	npm install -g @vue/cli

Let’s create a new Vue project by the following command

vue create event-bus-demo

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

import Vue from 'vue'
Vue.prototype.$eventBus = new Vue();

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.

<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>

<div>

<h5>Article</h5>

</center>

</div>

<label for="title">Title</label>

</div>

<label for="description">Description</label>

</div>

</div>

</template>

export default {

data() {

return {

article: {

title: '',

description: ''

}

methods: {

submit() {

this.$eventBus.$emit('emitted-data', this.article);

this.article = {};

}

</script>

</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.

<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>

<tbody>

<tr>

<th width="50%" style="text-align: center">Title</th>

<th width="50%" style="text-align: center">Description</th>

</tr>

<td>{{ title }}</td>

<td>{{ description }}</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

data() {

return {

title: '',

description: ''

}

mounted() {

this.$eventBus.$on('emitted-data', ({

title,

description

}) => {

this.title = title;

this.description = description

})

}

</script>

</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

<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>&copy; 2018</span>&nbsp;<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>

<div>

<nav>

<li>

</li>

</ul>

</div>

</nav>

<home-component></home-component>

<br>

<h5>Listening Component</h5>

<listener-component></listener-component>

</div>

</footer>

</div>

</template>

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.

Global Event Bus Tutorial – Vue.js

What is EventBus?

Vue.js components

#1: Create a new Vue project

#2: Configure Event Bus

#3: Create a Emit Component

#4: Create Listener Component

#5: Register Both components

Event bus demo

About the author

Parth Vakil

Leave a Comment X