資訊專欄INFORMATION COLUMN
摘要：官方給出的最簡(jiǎn)單的升級(jí)建議是使用集中的事件處理器而且也明確說(shuō)明了一個(gè)空的實(shí)例就可以做到因?yàn)閷?shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口在中在初始化之前，給添加一個(gè)名字為的空對(duì)象某一個(gè)組件內(nèi)調(diào)用事件觸發(fā)另一個(gè)組件內(nèi)調(diào)用事件接收在組件銷毀時(shí)接除事件綁定使用方法
在vue的開(kāi)發(fā)中，經(jīng)常會(huì)在兩個(gè)組件間進(jìn)行事件的通信
在vue1.0中我們使用$dispatch 和 $broadcast
child.vue:
this.$dispatch("eventName",this.data);
parent.vue:
event:{
"eventName":function(data) {
// 執(zhí)行的方法
}
}
但是在vue2.0中$dispatch 和 $broadcast被棄用，因?yàn)榛诮M件樹(shù)結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解，并且在組件結(jié)構(gòu)擴(kuò)展的過(guò)程中會(huì)變得越來(lái)越脆弱,并且這只適用于父子組件間的通信。官方給出的最簡(jiǎn)單的升級(jí)建議是使用集中的事件處理器,而且也明確說(shuō)明了 一個(gè)空的vue實(shí)例就可以做到,因?yàn)閂ue 實(shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口
在vue2.0中在初始化vue之前，給data添加一個(gè) 名字為eventhub 的空vue對(duì)象
new Vue({
el: "#app",
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})
某一個(gè)組件內(nèi)調(diào)用事件觸發(fā)
this.$root.eventHub.$emit("eventName", event.target);
另一個(gè)組件內(nèi)調(diào)用事件接收, 在組件銷毀時(shí)接除事件綁定,使用$off方法
created() {
this.$root.eventHub.$on("eventName",(target) => {
this.functionName(target)
});
},
method:{
functionName(target) {
console.log(target);
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115474.html
摘要：官方給出的最簡(jiǎn)單的升級(jí)建議是使用集中的事件處理器而且也明確說(shuō)明了一個(gè)空的實(shí)例就可以做到因?yàn)閷?shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口在中在初始化之前，給添加一個(gè)名字為的空對(duì)象某一個(gè)組件內(nèi)調(diào)用事件觸發(fā)另一個(gè)組件內(nèi)調(diào)用事件接收在組件銷毀時(shí)接除事件綁定使用方法 在vue的開(kāi)發(fā)中，經(jīng)常會(huì)在兩個(gè)組件間進(jìn)行事件的通信 在vue1.0中我們使用$dispatch 和 $broadcast child.vue: th...
摘要：官方給出的最簡(jiǎn)單的升級(jí)建議是使用集中的事件處理器而且也明確說(shuō)明了一個(gè)空的實(shí)例就可以做到因?yàn)閷?shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口在中在初始化之前，給添加一個(gè)名字為的空對(duì)象某一個(gè)組件內(nèi)調(diào)用事件觸發(fā)另一個(gè)組件內(nèi)調(diào)用事件接收在組件銷毀時(shí)接除事件綁定使用方法 在vue的開(kāi)發(fā)中，經(jīng)常會(huì)在兩個(gè)組件間進(jìn)行事件的通信 在vue1.0中我們使用$dispatch 和 $broadcast child.vue: th...
摘要：從過(guò)來(lái)的都知道，在中，父子組件間事件通信的和被移除了。通過(guò)廣播和事件分發(fā)的機(jī)制，就顯得比較混亂了。在父組件中中然后，在子組件中，主要在任意事件回調(diào)中使用來(lái)觸發(fā)自定義的事件，后面還可以加上參數(shù)傳給父組件。 從vue1.x過(guò)來(lái)的都知道，在vue2.0中，父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹(shù)結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解，并且在組件結(jié)...
摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過(guò)觸發(fā)事件，回調(diào)給父組件。非父子組件兄弟組件之間的數(shù)據(jù)傳遞非父子組件通信，官方推薦使用一個(gè)實(shí)例作為中央事件總線。 寫(xiě)在前面 因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。 文章的原地址：https://github.com/answ...
閱讀 3524·2021-11-18 10:02
閱讀 958·2021-09-04 16:48
閱讀 2044·2019-08-30 15:55
閱讀 3549·2019-08-30 15:52
閱讀 1820·2019-08-30 14:08
閱讀 3565·2019-08-30 13:19
閱讀 1150·2019-08-27 10:53
閱讀 3128·2019-08-26 12:11
