在工做中有些情景。兄弟之间的通讯，可能用vuex 并不方便，因此须要一个中间介质传递一下。css
Vue 实例实现了一个事件分发接口.html
请直接看代码,在初始化web app的时候，给data添加一个 名字为eventhub 的空vue对象vue
new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: new Vue() } })
好的 这个时候 你就能够一劳永逸了，在任何组件均可以调用事件发射 接受的方法了.webpack
如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个git
某一个组件内调用事件触发github
//经过this.$root.eventHub获取此对象 //调用$emit 方法 this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)
另外一个组件内调用事件接受,固然在组件销毁时接触绑定,使用$off方法web
this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{ handle(yourData) } )
遇到一个问题 ，考虑特定场景：vuex
跳转路由以前咱们调用了$emit方法,这个方法在A组件里面处理数据，可是A组件绑定$on事件以前 $emit事件已经发射，因此这会致使一直接受不到消息，看来这个事件绑定有时效性问题，你能够setTimeout来作一下延时，可是这个特别奇怪，那就把数据存到store而后等A组件加载完了再去取。。。。json
额外方法bash
1.在stackoverflow 发现一个更加简洁的方法,由于本质上vue是一个js对象，咱们想保存一个全局对象，只须要在Vue的prototype上面增长一个属性便可,本质上全部Vue组件都是继承全局的Vue。只要在初始化Vue对象以前给原生Vue对象prototype增长属性，那样全部的组件（由于都是继承自它的实例）均可以访问到这个属性。相关资料请参考我以前的文章关于函数的构造函数和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)
2.
刚才看到了webpack的插件里面有一个definePlugin 它能够帮咱们定义全局的常量。
如何使用，很简单可是更好，咱们不用去修改Vue对象：
new webpack.DefinePlugin({ CONFIG: require('path/sysconfig.json') });
而后咱们也能够在全局内使用CONFIG对象了。