eventBus是用于组件间通讯的一种方法,我们都知道在vue中数据流是单向的,那么非父子组件间的传值自然值得我们注意
一种是我们都很熟悉的vuex;它可以通过仓库沟通我们所有组件间的通信;而另外还存在一种叫做eventBus的方法:
使用场景如:兄弟组件间的通信,父组件fatherCom中同时使用到childOne和childTwo两个兄弟组件,点击子组件childTwo需要另一子组件ChildOne响应;
1.定义eventBus,建立eventBus.js文件,挂载到Vue实例上,暴露出去:
import Vue from 'vue';
let bus = new Vue();
Vue.prototype.$eventBus = bus;
export default bus;
2.使用到eventBus的兄弟组件都引入eventBus.js:
import eventBUs from '../../utils/eventBus.js'
3.子组件childone声明发布(声明)事件,通常在mounted或created中声明:
created() {
eventBus.$
on('getTarget', target => {
console.log(target);
});
}
4.子组件childtwo订阅(触发)事件:
methods: {
addCart(
event) {
eventBus.$emit('getTarget', event.target);
}
}
这就是一个完整的eventBus通信
。