色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue2 廣播

夏志豪1年前8瀏覽0評論

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官方文檔。

上一篇vue2 遞歸
下一篇vue2api