vue2.0組件間事件派發與接收

JayChen 發布于2019-08-20 13:30 / 936人閱讀

摘要：官方給出的最簡單的升級建議是使用集中的事件處理器而且也明確說明了一個空的實例就可以做到因為實例實現了一個事件分發接口在中在初始化之前，給添加一個名字為的空對象某一個組件內調用事件觸發另一個組件內調用事件接收在組件銷毀時接除事件綁定使用方法

在vue的開發中，經常會在兩個組件間進行事件的通信

在vue1.0中我們使用$dispatch 和 $broadcast

child.vue:

this.$dispatch("eventName",this.data);

parent.vue:

event:{
    "eventName":function(data) {
        // 執行的方法
    }
}

但是在vue2.0中$dispatch 和 $broadcast被棄用，因為基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結構擴展的過程中會變得越來越脆弱,并且這只適用于父子組件間的通信。官方給出的最簡單的升級建議是使用集中的事件處理器,而且也明確說明了一個空的vue實例就可以做到,因為Vue 實例實現了一個事件分發接口
在vue2.0中在初始化vue之前，給data添加一個名字為eventhub 的空vue對象

new Vue({
  el: "#app",
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})

某一個組件內調用事件觸發

this.$root.eventHub.$emit("eventName", event.target);

另一個組件內調用事件接收, 在組件銷毀時接除事件綁定,使用$off方法

created() {
    this.$root.eventHub.$on("eventName",(target) => {
    this.functionName(target)
  });
},
method:{
    functionName(target) {
    console.log(target);
    }
}

GPU云服務器云服務器 vue2.0 cdn Android派發機制事件與動畫阿里云郵箱接收服務器與端口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81093.html

vue2.0組件間事件派發與接收

摘要：官方給出的最簡單的升級建議是使用集中的事件處理器而且也明確說明了一個空的實例就可以做到因為實例實現了一個事件分發接口在中在初始化之前，給添加一個名字為的空對象某一個組件內調用事件觸發另一個組件內調用事件接收在組件銷毀時接除事件綁定使用方法在vue的開發中，經常會在兩個組件間進行事件的通信在vue1.0中我們使用$dispatch 和 $broadcast child.vue: th...

luckyw 2019-08-30 13:19 評論0 收藏0
vue2.0組件間事件派發與接收

摘要：官方給出的最簡單的升級建議是使用集中的事件處理器而且也明確說明了一個空的實例就可以做到因為實例實現了一個事件分發接口在中在初始化之前，給添加一個名字為的空對象某一個組件內調用事件觸發另一個組件內調用事件接收在組件銷毀時接除事件綁定使用方法在vue的開發中，經常會在兩個組件間進行事件的通信在vue1.0中我們使用$dispatch 和 $broadcast child.vue: th...

My_Oh_My 2019-08-01 16:10 評論0 收藏0
Vue2.0父子組件間事件派發機制

摘要：從過來的都知道，在中，父子組件間事件通信的和被移除了。通過廣播和事件分發的機制，就顯得比較混亂了。在父組件中中然后，在子組件中，主要在任意事件回調中使用來觸發自定義的事件，后面還可以加上參數傳給父組件。從vue1.x過來的都知道，在vue2.0中，父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結...

xietao3 2019-08-21 18:40 評論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過觸發事件，回調給父組件。非父子組件兄弟組件之間的數據傳遞非父子組件通信，官方推薦使用一個實例作為中央事件總線。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評論0 收藏0