vue 组件之间事件触发($emit)与event Bus($on)-踩坑记

在项目有个需求是根据多个下拉框选切换不同的表格，频繁的兄弟组件间的传值，就用到了组件的触发 1.新建了一个Js文件，来作为总线传值，就是暴露一个vue实例。 可以在main.js中全局引入，我只是在需要的组件中引入。

2.在组件中引入

3 A组件中发射

      let search = {
        reportLevel: parseInt(this.reportlevel), // 统计对象 1 业务名称 2 产品服务号 3 短信批次
        reportLevelVal: this.buName,
        sendTime: this.time,
      };
      searchBus.$emit("getSearch", search);
    },

B组件中接收

      search.$on("getSearch", (data) => {
        this.search = data;
        this.getData(data);
      });
    },

3.我遇到的坑是会接收$on会触发多次，

解决办法就是在利用$on 接收事件的组件的beforeDestroy或destroy周期中将事件进行销毁，使用$off()

beforeDestroy () {
　　search.$off('getSearc')
},