在Vue中,跨組件通信是一件很常見的事情。常見的方式有Props、$emit/$on以及Vuex等。而其中,$emit/$on會導(dǎo)致耦合度增加,代碼可讀性較低等問題。而Vue提供了一種EventBus機(jī)制,能夠很好地解決這個問題。
EventBus是Vue中內(nèi)置的一個組件之間通信機(jī)制。我們可以利用它來實(shí)現(xiàn)不同組件之間的通信,而無需簡歷直接關(guān)聯(lián)。EventBus可以理解成一個媒介,用于組件之間傳遞消息,通知其他組件某些事情發(fā)生了。
import Vue from 'vue';
export const EventBus = new Vue();
以上代碼首先引用Vue庫,在Vue實(shí)例上定義了一個全局的EventBus實(shí)例。為了在其他組件中訪問EventBus,我們需要將其導(dǎo)出。在其他組件中,只需引入并使用$emit/$on等API即可。
import { EventBus } from './event-bus.js';
// 發(fā)送事件
EventBus.$emit('custom-event', { data });
// 接收事件
EventBus.$on('custom-event', (data) =>{
console.log(data);
});
上述代碼首先引入將EventBus實(shí)例,然后我們可以用$emit方法向其他組件發(fā)送一個含有數(shù)據(jù)的事件。在其他組件中,我們可以使用$on方法監(jiān)聽這個事件并執(zhí)行一些操作(類似于訂閱-發(fā)布模式)。
通過上述方式,我們可以很容易地實(shí)現(xiàn)EventBus機(jī)制,在Vue組件中跨組件傳遞消息。對于組件之間的通信,我們可以更加清晰和優(yōu)雅地實(shí)現(xiàn)。