bus传值

bus上可以定义一个事件，

bus上可以触发事件

不论是组件还是js模块，都可以用引入bus

bus的意义就是，在多个组件存在复杂情况下，比如：a组件上点击一个按钮，要在毫不相关的y组件上弹出一个弹窗。如果用父子事件传递，$emit触发，会非常不方便。

此时，可以如下操作：

a组件：

<button @click='$bus.$emit("alertEvent")'>btn</button>

y组件：

methods:{
  handleAlertEvent(){console.log("a组件的按钮点击了")}
},

created（）{
  this.$bus.$on('alertEvent',handleAlertEvent)
 },

beforeDestory(){

  this.$bus.$off('alertEvent',handleAlertEvent)

 }

bus通常是一个vue对象；

const app = new Vue()
Vue.prototype.$bus = app;
export default app;//让js模块里也可以用到，

 

bus的源码简写

const bus = {
  //事件名称和事件回调函数的对应；
  __events__: {},//这是一个以事件名作为属性名，属性值是元素是回调函数的set
  $on(event, fn) {
    if (!this.__events__[event]) {
      this.__events__[event] = new Set();
    }
    this.__events__[event].add(fn)
  },
  $off(event, fn) {
    this.__events__[event].delete(fn)
  },
  $emit(event) {
    const set = this.__events__[event];
    if (set) {
      set.forEach(item => item())
    }
  },

};