使用场景如:兄弟组件间的通信,父组件fatherCom中同时使用到childOne和childTwo两个兄弟组件,点击子组件childTwo需要另一子组件ChildOne响应
一:定义eventBus,建立eventBus.js文件,挂载到Vue实例上,暴露出去:
import Vue from 'vue';
let bus = new Vue();
Vue.prototype.$eventBus = bus;
export default bus;
二:使用到eventBus的兄弟组件都引入eventBus.js:
import eventBus from '../EventBus/EvemtBus.js'
三:子组件childone声明发布(声明)事件,通常在mounted或created中声明:
created() {
eventBus.$on('getTarget', target => {
console.log(target);
});
}
四:子组件childtwo订阅(触发)事件:
methods: {
addCart(event) {
eventBus.$emit('getTarget', event.target);
}
}