Vue2 0 事件發射與接收

由於vue2.0 移除了1.0中的$dispatch 和$broadcast 這兩個元件之間通訊傳遞資料的方法 ,官方的給出的最簡單的公升級建議是使用集中的事件處理器,而且也明確說明了乙個空的vue例項就可以做到,因為vue 例項實現了乙個事件分發介面.

new
vue(
})

好的這個時候你就可以一勞永逸了，在任何元件都可以呼叫事件發射接受的方法了.

如何獲取到這個空的vue物件 eventhub呢.在元件裡面直接呼叫這個

某乙個元件內呼叫事件觸發

//通過this.$root.eventhub獲取此物件 //呼叫$emit 方法

this.$root.eventhub.$emit('your_event_name', yourdata)

另乙個元件內呼叫事件接受,當然在元件銷毀時接觸繫結,使用$off方法

this.$root.eventhub.$on
('your_event_name', (yourdata)=> )

遇到乙個問題，考慮特定場景：

跳轉路由之前我們呼叫了$emit方法,這個方法在a元件裡面處理資料，但是a元件繫結$on事件之前 $emit事件已經發射，所以這會導致一直接受不到訊息，看來這個事件繫結有時效性問題，你可以settimeout來做一下延時，但是這個特別奇怪，那就把資料存到store然後等a元件載入完了再去取。。。。

官方文件我

—-宇宙分割線—–

record on 12 24

在stackoverflow 發現乙個更加簡潔的方法,因為本質上vue是乙個js物件，我們想儲存乙個全域性物件，只需要在vue的prototype上面增加乙個屬性即可,本質上所有vue元件都是繼承全域性的vue。只要在初始化vue物件之前給原生vue物件prototype增加屬性，那樣所有的元件（因為都是繼承自它的例項）都可以訪問到這個屬性。相關資料請參考我之前的文章關於函式的建構函式和prototype《四》

vue.prototype.$eventhub= vue.prototype.$eventhub ||  new vue()

vue.prototype.$config =vue.prototype.$config||require('path/sysconfig.json')

這樣我們在元件內部就可以直接呼叫$eventhub 和 $config物件了。

比如在mounted函式裡面直接 console.log($config.yourkey)

—-宇宙分割線—–

record on 1.1.2017

剛才看到了webpack的外掛程式裡面有乙個defineplugin 它可以幫我們定義全域性的常量。

如何使用，很簡單但是更好，我們不用去修改vue物件：

new
webpack
.defineplugin();

然後我們也可以在全域性內使用config物件了。

Vue2 0 事件發射與接收

vue2 0表單事件的繫結

Vue 2 0學習筆記事件匯流排

vue2 0學習記錄

Vue2 0 事件發射與接收

vue2 0表單事件的繫結

Vue 2 0學習筆記 事件匯流排

vue2 0學習記錄

相關推薦

Vue 2 0學習筆記事件匯流排