El uso de EventBus en Vue, cómo implementar EventBus en Vue

La comunicación entre componentes hermanos o componentes multinivel en vue es más problemática. En este momento, podemos usar EventBus  para lograr el negocio que queremos, pero a menudo se nos pide durante las entrevistas o se nos pide que escribamos EventBus , así que exploremos

1. ¿Cómo usar EventBus en Vue?

1. Definición global en el momento de la inicialización        

import Vue from 'vue'

// main.js 中

// 第一种定义方式
Vue.prototype.$eventBus = new Vue()


// 第二种定义方式
window.eventBus = new Vue();

2. Eventos desencadenantes

//使用方式一定义时
// params 多个参数
this.$eventBus.$emit('eventName', param1,param2,...)


//使用方式二定义时
eventBus.$emit('eventName', param1,param2,...)

3. Escucha eventos

//使用方式一定义时
this.$eventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行 逻辑代码
    // params 多个参数
})


//使用方式二定义时
eventBus.$on('eventName', (param1,param2,...)=>{
    //需要执行 逻辑代码
})

4. Eliminar eventos 

Durante el proceso de desarrollo, debemos eliminar el eventBus no utilizado a tiempo por las siguientes razones:

        ① Para evitar que el evento se active repetidamente al escuchar

        ② Debido a las últimas actualizaciones, los eventos pueden vincularse y monitorearse varias veces, y es necesario eliminar el monitoreo de eventos en este momento

        ③ El eventBus que no se elimina a tiempo provocará pérdidas de memoria

//使用方式一定义时
this.$eventBus.$off('eventName');

//使用方式二定义时
eventBus.$off('eventName');

 

2. ¿Cuál es el principio de EventBus?

Deja las tonterías, ve directamente al código y usa class para implementar nuestro propio EventBus:

class MyEventBus {
    constructor() {
        // 存储所有事件对应的回调的对应关系
        /**
         * key : [ callback, callback ]
         */

        this.items = {};
    }

    // 监听
    $on(eventName, callback) {
        if (!this.items[eventName]) {
            //一个事件可能有多个监听者
            this.items[eventName] = [];
        }
        this.items[eventName].push(callback)

        // 简化版写法 等同于上面
        // (this.items[eventName] ||= []).push(callback)
    }


    // 触发监听
    $emit(eventName, ...args) {
        if (!this.items[eventName]) return;
        this.items[eventName].forEach(ca => ca(...args))
    }


    // 去掉监听
    $off(eventName) {
        this.items[eventName] = []
    }
}

export default new MyEventBus();