由於 vue2.0 移除了1.0中的$dispatch 和$broadcast 這兩個組件之間通信傳遞數據的方法,官方給出的最簡單的升級建議是使用集中的事件處理器,而且也明確說明了 一個空的vue實例就可以做到,因為Vue 實例實現了一個事件分發接口。
vue2.0中可以使用 $emit, $on, $off 分別來分發、監聽、取消監聽事件。
1、在初始化web app的時候,給data添加一個 名字為 eventhub 的空vue對象,就可以在任何組件都可以調用事件發射接收的方法了,在main.js中添加:
new Vue({ el: '#app', router, data: { eventHub: new Vue() }, render: h => h(App), components: { App }, template: '<App/>' })
這個時候你就可以一勞永逸了,在任何組件都可以調用事件發射和接受的方法了
2、在home組件內調用事件接受參數($on監聽)
mounted(){ this.$root.eventHub.$on('事件名稱', (data)=>{ console.log('接受到的參數:'+data) } ) },
3、在adress組件內調用事件觸發 ($emit分發)
//通過this.$root.eventHub獲取此對象 this.$root.eventHub.$emit('事件名稱', '這里是參數,選中后的地址')
4、在home組件中銷毀($off取消)
beforeDestroy () { this.$root.eventHub.$off('事件名稱') },
5、拓展
在stackoverflow 發現一個更加簡潔的方法,因為本質上vue是一個js對象,我們想保存一個全局對象,只需要在Vue的prototype上面增加一個屬性即可。
本質上所有Vue組件都是繼承全局的Vue,只要在初始化Vue對象之前給原生Vue對象prototype增加屬性,那樣所有的組件(因為都是繼承自它的實例)都可以訪問到這個屬性。
// 在初始化Web app 之前 加上這樣一句:
Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()
當然我們可以定義其他的全局變量。比如當前app的系統配置文件,名字為sysconfig.json,你可以這樣定義
Vue.prototype.$config =Vue.prototype.$config||require('path/sysconfig.json')
這樣我們在組件內部就可以直接調用$eventHub 和 $config對象了。 比如在mounted函數里面直接 console.log($config.yourKey)
剛才看到了webpack的插件里面有一個definePlugin 它可以幫我們定義全局的常量。
如何使用,很簡單但是更好,我們不用去修改Vue對象:
new webpack.DefinePlugin({ CONFIG: require('path/sysconfig.json') });
然后我們也可以在全局內使用CONFIG對象了。