vue项目中全局使用EventBus的方法，以及利弊分析

2024-01-24 15:46:58

EventBus是什么

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个地方注册事件，有另外一个或多个地方订阅事件。

为什么要用EventBus

vue组件之间的通信，常见的有父传子，子传父，或者兄弟组件间互传，涉及到跨页面时需要用到vuex或者缓存的方式传值。一般来说用vuex做状态管理是项目的首选，但有一些小型而且快消的项目，对后期维护要求不高的，也可以考虑用EventBus作为通信方式。EventBus的有点在于灵活，去中心化，代码量少。

怎么把EventBus全局使用到vue项目里

直接上代码：

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

在主入口那里全局使用组件：

// main.js
import Vue from "vue";
import Bus from "./utils/bus";

Vue.use(Bus);

使用方法

组件A里：

created() {
    //事件订阅
    this.$bus.on("addProduct", res => {
      this.product = res;
    });
  },

组件B里：

addProduct(row) {
  //事件发布
  this.$bus.emit("addProduct", row);
},

注意事项

在订阅事件的组件里，一定要在组件销毁之前把监听事件也手动销毁一下。如果不销毁，会累积多次创建监听事件，一旦在B组件里触发了事件发布，组件A就会执行多次事件。
在组件A的组件销毁前的生命周期里，加上：

beforeDestroy() {
    //销毁监听事件
    this.$bus.off("addProduct");
  }

利弊分析

使用EventBus的好处在于：

可全局使用
订阅和发布都很灵活，代码量少
跨组件通信，无需使用缓存

相对于状态管理，缺点也很明显：

订阅和发布必须成对出现，不然就没有意义
由于在页面使用里的灵活性，一旦事件多了后，难以对事件进行维护
在订阅事件的组件里，必须手动销毁监听，否则会引发多次执行
对于一些包含业务逻辑的通信，复用性差，需要在多个地方重复写逻辑

总结

中大型项目都不推荐用EventBus，建议用vuex做状态管理，方便日后维护。
小型项目，涉及到多处跨组件通信的情况，可以考虑使用。

码农公寓