How to Create EventBus to Communicate Between Vue Components

Hello Developers Hope you are doing well. In this tutorial i am going to discuss about vue custom events. Do you know what is vue custom events? If you don't know about vue custom events, don't worry i will help you to learn about it.

Actually the general way of implementing a global event bus in Vue is just using the Vue object itself, nothing else of course. Many times we need a quick and very easy solution to pass data between Vue.js components. We can pass data from one vue component to another vue component using vue custom events.

Of course there is Vuex for centralized state management in vue component.We can use vuex to manage state in vue component, but in tiny project we can use vue custom events to do the same tasks.

So for an application with simple architecture and small scale application it’s enough to communicate between components using events. For this reason we can create a quick solution and implement EventBus. EventBus permits us to emit an event in one component and listen for that event in another component or it would be same component.

 

vue-js-custom-events-bus-example

 

Setup Events Bus

It is very simple to setup event bus in vue app. Just use this couple of line code having it in your vue component globally. 

let Event = new Vue()
window.Event = Event;

Here we just created a vue object and to be assigned this object to window object so that we can use it globally in vue component.

Use of custom events without parameter:

 export default {
        data(){
            return {
               
            }
        },
        mounted() {
           Event.$emit("vue_event_testing")
        },
        methods: {
            test() {
                 Event.$on("vue_event_testing", () => {
                    console.log("Hello vue")
                })
            },
        },
        created(){
            this.test()
        }
    }

 

Look here we use it in same components. If you load this code having used it in your vue component the output will be:

Output
Hello vue

 

Use of custom events with parameter:

 export default {
        data(){
            return {
                name: "John"
            }
        },
        mounted() {
           Event.$emit("vue_event_testing", this.name)
        },
        methods: {
            test() {
                 Event.$on("vue_event_testing", (name) => {
                    console.log(name)
                })
            }
        },
        created(){
            this.test()
        }
    }

 

Read also :  How to Pass Data from Blade to Vue Components

If you load this code the output will:

Output
John

 

Have you understood ? Here in this statement Event.$emit("vue_event_testing", this.name), the first option will be EVENT_NAME name and second parameter will be data. Hope you have understood.

Remember : You can use this   Event.$on("vue_event_testing", (name) => {  })  in another vue component to get the passing name data. 

Hope this vue custom events tutorial can help you to learn new things.