Vue兄弟组件的通讯方式——EventBus

Hokori 3月21日

我们知道Vue的父子组件通讯,
是通过子组件调用vm.$emit('eventName',value)
由父组件通过vm.$on('eventName',value=>{})监听事件的

而Vue兄弟组件通讯用到的EventBus,个人认为是基于父子组件通讯方式的一种hack

思想就是new一个不带任何参数的Vue实例,通过它原型上的$emit方法和$on方法的方式来实现兄弟组件通讯

具体实现如下:

假设我们现在有 a.js 、 b.js 、 main.js,
其中a、b是兄弟组件,main是它们的父组件

1、创建一个EventBus实例

//eventBus.js
import Vue from 'vue';
export default new Vue();

2、在实际上的Vue实例中导入EventBus

//main.js
import bus from './eventBus.js'

3、然后在a组件的methods里添加相应的$emit方法

//a.js
methods:{
    click(value){
        bus.$emit('eventName',value);
    }
}

4、在b组件的created钩子中加上监听

//b.js
created(){
    bus.$on('eventName',value=>{});
}

但实际上项目复杂的时候还是直接用Vuex系统地来进行状态管理更好

icon_biggrin.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_sad.pngicon_cool.pngicon_evil.pngicon_mrgreen.pngicon_exclaim.pngicon_surprised.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_confused.pngicon_lol.pngicon_mad.pngicon_question.pngicon_idea.pngicon_redface.png
expand_less