vue中bus总线使用小结

1.$emit和$on事件必须使用一个空的Vue实例作为中央事件总线的实例上，才能够触发，否则会出现子组件$emit后父组件没有监听到函数的变化的情况。
新建一个文件bus.js
代码如下：

import Vue from 'vue'
const bus = new Vue()
export default bus

2.可以在main.js中引入该文件，并将其挂载到Vue函数上，这样做的好处是在Vue实例或组件中不用再去重复引用bus
代码如下：

import bus from '@/utils/bus'
Vue.prototype.$bus = bus

3.使用bus发送消息，进行事件触发,附加参数都会传给监听器回调
代码如下：

this.$bus.$emit(event, [...args])

如果没有参数，形式如下：

this.$bus.$emit(event)

4.使用bus接收消息,回调函数会接收所有传入事件触发函数的额外参数
代码如下：

this.$bus.$on(event, (e) => {
      console.log('e', e)
    })

5.进行事件移除
注意：
如果没有提供参数，则移除所有的事件监听器
如果只提供了事件，则移除该事件所有的监听器
如果同时提供了事件与回调，则只移除这个回调的监听器
代码如下：

this.$bus.$off(event)

参考文档链接：https://www.cnblogs.com/kadima-zy/p/emit.html

vue中的bus.$on事件多次被绑定解决方案，参考文档链接：https://www.cnblogs.com/shirliey/p/11327126.html