event bus in vuejs

 

In Vue.js, an event bus is a way to establish communication between components by using a centralized event hub. It allows components to emit and listen to events without having a direct parent-child relationship or passing props through intermediate components.

To implement an event bus in Vue.js, you can follow these steps:

1. Create a new Vue instance as the event bus:

// eventBus.js
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

In this example, we create a new Vue instance named eventBus and export it as a module. This instance will serve as our event bus.

2. Emit events from a component:

import eventBus from './eventBus';

// Inside a component method or lifecycle hook
eventBus.$emit('eventName', eventData);

To emit an event, you can use the $emit method on the eventBus instance. Specify the event name as the first argument and optionally pass data as the second argument. This will trigger the event and send it to all components listening for it.

3. Listen to events in a component:

import eventBus from './eventBus';

// Inside a component method or lifecycle hook
eventBus.$on('eventName', eventData => {
  // Handle the event and the data received
});

To listen to an event, you can use the $on method on the eventBus instance. Provide the event name as the first argument and a callback function as the second argument. This callback function will be executed whenever the event is emitted, and you can handle the event and the accompanying data inside it.

Remember to import the eventBus instance in the components where you want to emit or listen to events.

By utilizing the event bus pattern, you can establish communication between different components without having them directly reference each other, enabling looser coupling and more flexible architecture in your Vue.js application.