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通信
。