vue中我们经常遇到组件之间的通信,通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式如下:
父 → 子:props传递数据 / vuex;
**子 → 父:bus事件总线 / vuex;
**
兄弟组件:bus事件总线 / vuex;
兄弟组件:bus事件总线 / vuex;
1、创建事件总线
创建一个名为 bus.js 的JS文件
import Vue from 'vue';
export default new Vue();
或者直接在项目中的 main.js 初始化 Bus
//全局事件总线
Vue.prototype.$Bus = new Vue()
2、组件中使用
// one.vue 中绑定监听方法
import Bus from 'bus.js';
methods: {
busOn () {
Bus.$on('test', params =>{
...
})
}
}
// two.vue 中触发方法
import Bus from 'bus.js';
methods: {
busEmit () {
Bus.$emit('test', params)
}
}
全局事件总线
// one.vue 中绑定监听方法
methods: {
busOn () {
this.$Bus.$on('test', params =>{
...
})
}
}
// two.vue 中触发方法
methods: {
busEmit () {
this.$Bus.$emit('test', params)
}
}
**注意 :**公共事件 Bus 使用不善,会是一种灾难。我们都知道vue是单页应用,如果你在某一个页面刷新了之后,与之相关的Bus会被移除,这样就导致业务走不下去。如果业务有反复操作的页面,这样Bus事件有可能被多次绑定,造成方法会被多次调用,也是一个非常大的隐患。通常我们会在vue页面销毁 (beforeDestroy/destroyed)时,同时移除 Bus 事件监听。
关于Bus事件被多次绑定的问题,可以参考 [ https://www.jianshu.com/p/4bf32e518750 ]文章来处理问题。