同一页面组件多次引用，Bus.$on & $off

​业务需求：一个页面，筛选条件和表格，表格部分做成组件引入，表格具有列筛选功能，筛选的时候触发父组件查询接口，参数由Bus.$emit()传过去

filterChange(filters) {

    //执行片段
    ...

    Bus.$emit('filterChange', filters)
}

父组件中：在mounted钩子函数中监听

mounted(){
	Bus.$on('filgerChange', (filters) =>{
	    
	    // 执行片段
	    ...
	    
	})	
}

现象：

由于业务需求，同一各页面引用了多次，只是查询参数不同，页面显示的内容不同，但在查询的时候，两个页面查询事件耦合，A页面调筛选查询接口，会同时触发B页面的查询接口，断点跟踪，Bus.$emit()只执行一次，但Bus.$on()执行了多次

解决：

及时监听 及时关闭 防止多次执行

  created() {
    // 及时监听 及时关闭 防止多次执行
    Bus.$off('filterChange')
  },
  mounted() {
    // 历史数据页面默认调查询接口
    if (this.isHistory) {
      this.searchData();
    }
    Bus.$on('filterChange', (filters) => {
      // debugger
      //执行片段
      ...
    })
  },

注意

不能在destroy钩子中再关闭监听器Bus.$off()，否则页面A页面关闭销毁后，B页面中的方法也会一起失效

错误示例

  Bus.$on('filterChange', (checkSerialList, checkItemList) => {
      // debugger
      //执行片段
      ...
    })
  },
  destroyed() {
    // 卸载注册的事件，否则会多次触发
    Bus.$off('filterChange')
  },

​