Vue之事件总线

什么是事件总线？

• 有一个全局EventBus
• 所有事件都订阅它
• 所有组件也发布到它，订阅组件获得更新
• 所有组件都能够将事件发布到总线，然后总线由另一个组件订阅，然后订阅它的组件将得到更新

预知详情可点这里，看这位大佬的

这边利用Es6的class类模拟事件总线

创建一个Bus类负责事件派发.监听和回调管理

class  Bus {

constructor () {

// {

// eventName1:[fn1, fn2],

// eventName2: [fn3,fn4]

// }

this.callbacks = {}

}

$on (name, fn) {

this.callbacks[name] = this.callbacks[name]

this.callbacks[name].push(fn)

}

$emit (name, args) {

if (this.callbacks[name]) {

this.callbacks[name].forEach(cb  =>  cb(args))

}

}

}

// main.js

Vue.prototype.$bus =  new  Bus()

// child1

this.$bus.$on('foo', handle)

// child2

this.$bus.$emit('foo')