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')