Vue2 中的廣播機(jī)制被稱為事件系統(tǒng),通過該機(jī)制,我們可以在不同組件之間發(fā)送和接收消息,以達(dá)到組件之間通信的目的。事件系統(tǒng)是 Vue2 中非常重要的一部分,深入理解該機(jī)制對于開發(fā)Vue2應(yīng)用程序至關(guān)重要。
Vue2 中的事件系統(tǒng)基于發(fā)布 - 訂閱模式,即一個(gè)組件發(fā)送消息,另一個(gè)組件可以訂閱(監(jiān)聽)該消息。發(fā)送消息的組件稱為發(fā)布者,接收消息的組件稱為訂閱者,這里存在一個(gè)中間件,被稱為事件總線(event bus),它負(fù)責(zé)在不同組件之間傳遞消息。
/** * 創(chuàng)建一個(gè)事件總線實(shí)例 * 它將被用于所有的消息廣播 */ const bus = new Vue(); /** * 組件A發(fā)送一個(gè)消息 */ bus.$emit('eventA', { message: 'Hello' }); /** * 組件B訂閱該消息 */ bus.$on('eventA', function(payload) { console.log(payload.message); // 'Hello' });
如上文所示,在Vue2中創(chuàng)建事件總線實(shí)例的過程十分簡單,只需要在Vue實(shí)例中創(chuàng)建一個(gè)新的Vue實(shí)例即可。接著,我們通過$emit()方法可以向事件總線發(fā)送消息,該方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)為事件名稱,第二個(gè)參數(shù)為需要廣播的數(shù)據(jù)。通過$on()方法可以監(jiān)聽指定的事件,在收到指定事件時(shí)進(jìn)行相應(yīng)的操作,同時(shí)該方法也接受兩個(gè)參數(shù),第一個(gè)參數(shù)為事件名稱,第二個(gè)參數(shù)為觸發(fā)該事件時(shí)需要執(zhí)行的操作。
在Vue2中,事件總線實(shí)例可以創(chuàng)建在任何一個(gè)組件中,這使得我們可以在任何組件之間進(jìn)行通信,例如,我們可以在父組件中創(chuàng)建事件總線實(shí)例,再將其作為屬性傳遞給子組件,這樣子組件也可以通過事件總線來發(fā)送和接收消息了。
const bus = new Vue(); Vue.component('child', { props: ['bus'], template: '', methods: { sendData: function() { this.bus.$emit('eventChild', { message: 'from child component' }); } } }); new Vue({ el: '#app', data: { message: '', bus: bus }, created: function() { this.bus.$on('eventChild', function(payload) { this.message = payload.message; }.bind(this)); } });
如上文所示,我們在父組件中創(chuàng)建了一個(gè)事件總線實(shí)例,并將該實(shí)例作為屬性傳遞給了子組件。在子組件中,我們綁定了一個(gè)按鈕事件,并在該事件中發(fā)送了一個(gè)名為'eventChild'的消息。父組件通過給子組件傳遞事件總線實(shí)例的方式監(jiān)聽了該消息,當(dāng)收到該消息時(shí),我們在父組件中通過'bind()'方法將this變量綁定到回調(diào)函數(shù)中,確保對父組件中的數(shù)據(jù)進(jìn)行修改。
最后,需要注意的是,在Vue2中,事件總線實(shí)例不能被多次實(shí)例化,否則會出現(xiàn)多個(gè)事件總線實(shí)例并存的問題。如果必須要使用多個(gè)事件總線實(shí)例,可以借助于Vue插件技術(shù)來實(shí)現(xiàn),具體可以參考Vue官方文檔。