Introduction of Vue event bus

Time:2021-7-12

1. Introduction of eventbus

Eventbus, also known as event bus, can be used as a communication bridge in Vue. It is an event center shared by all components. It can register with the center to send or receive events. Therefore, components can notify other components in parallel

2. How to use eventbus

(1) Initialization

First, you need to create an event bus and export it so that other modules can use it or listen to it. There are two ways to handle it
First, create a new JS file, such as event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

In fact, eventbus is a component without dom
Another way is to initialize eventbus directly in main.js of the project

// main.js
Vue.prototype.$EventBus = new Vue()
//Note that the eventbus initialized in this way is a global event bus,

(2) Send event

Suppose there are two Vue pages that need to communicate. Page a binds the click event on the button and sends a message to inform page B

//Page a
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      Eventbus. $emit ("amsg",'message from page a ');
    }
  }
}; </script>

Next, receive the message on the B page

(3) Receive events

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      //Message from a
      this.msg = msg;
    });
  }
}; </script>

As mentioned earlier, if you don’t use it properly, eventbus will be a disaster. Vue is a single page application. If you refresh another page, the related eventbus will be removed, which will cause the business to fail. In addition, if the business has repeatedly operated pages, eventbus will trigger many times when listening, At this time, we need to deal with the relationship between eventbus and the project. Usually, when the Vue page is destroyed, colleagues remove eventbus event monitoring

Remove event listening

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

You can use eventbus. $off (‘eqwe ‘) to remove all the listening for an event in the application, or directly call eventbus. $off() to remove all the event channels without adding any parameters~~~~

3. Global eventbus

Its working principle is the publish / subscribe method, commonly known as pub / sub
Create global eventbus

//1. Create bus.js file * * Src / service / bus.js**
const install = (Vue) => { 
    const Bus = new Vue({ 
        methods: { 
            on (event, ...args) { 
                this.$on(event, ...args); 
            }, 
            emit (event, callback) { 
                this.$emit(event, callback); 
            }, 
            off (event, callback) { 
                this.$off(event, callback); 
            } 
        } 
    }) 
    Vue.prototype.$bus = Bus; 
} 
export default install;

//* * introduced in maix.js file**
import Bus from "@/service/bus"; 
Vue.use(Bus);


//Used in * * components**
this.$bus.on('Config_ Forms', (data) = > {}) // binding events
this.$bus.emit('Config_ Forms', data) // trigger this. $bus. Off ('config_ Forms') // unbinding event