title: Vue多個(gè)子組件的EventBus
date: 2018-11-23 17:27:03
tags: [Vue]
categories: Vue
前言
我在 轱轆UI 項(xiàng)目做 tabs 組件時(shí)犀暑，該組件有父子組件通訊的需求，然而多個(gè)子組件之間怎么通訊呢？我了解到可以用 EventBus 結(jié)合 依賴(lài)注入 來(lái)解決。
什么是EventBus
即組件共用的事件中心稿辙，可以向該中心注冊(cè)發(fā)送事件或接收事件，所以組件都可以上下平行地通知其他組件筒愚。
如何在父子組件中使用EventBus
父組件：
export default {
data(){
return {
eventBus: new Vue()
}
},
provide() {
return {
eventBus: this.eventBus
}
},
mounted() {
this.eventBus.$emit('event', () => {
})
}
}
所有后代組件：
export default {
inject: ['eventBus'],
mounted() {
this.eventBus.$on('event', () => {
})
}
}
其實(shí)就是用一個(gè)新的Vue實(shí)例的 on 和 $off 這三個(gè)接口來(lái)達(dá)到一個(gè) EventBus 的效果
更多可見(jiàn)我的 tabs組件 相關(guān)代碼
