Vue 2.0 事件派发与接收是其核心特性之一,用于组件间的通信。相较于Vue 1.0中移除的`$dispatch`和`$broadcast`方法,Vue 2.0推荐使用更为灵活的事件处理器。Vue 实例实现了事件分发接口,允许我们通过`$emit`、`$on`和`$off`来管理和监听事件。
要创建一个全局事件总线(Event Bus),即一个空的Vue实例,以便在应用的任何地方都能访问并使用它。在初始化Vue应用时,可以在根实例的`data`中定义一个名为`eventHub`的空Vue对象:
```javascript
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
})
```
这样,所有组件都可以通过`this.$root.eventHub`来访问这个事件总线。要触发一个事件,可以使用`$emit`方法:
```javascript
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)
```
而在其他组件中接收该事件,可以使用`$on`方法,并在不再需要监听时使用`$off`解除绑定:
```javascript
this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData) => {
handle(yourData)
})
// 在组件销毁时解除绑定
beforeDestroy() {
this.$root.eventHub.$off('YOUR_EVENT_NAME', this.handle)
}
```
然而,当事件触发早于事件绑定时,可能会导致接收不到消息。为解决这个问题,可以使用延迟执行,如`setTimeout`,或者将数据暂存到Vuex这样的状态管理库中,待目标组件加载后再处理。
另外,Vue的原型链(prototype)提供了一种创建全局变量的方法。在Vue实例化之前,可以通过向Vue.prototype添加属性来创建全局可访问的对象:
```javascript
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()
// 添加其他全局变量,如配置文件
Vue.prototype.$config = Vue.prototype.$config || require('path/sysconfig.json')
```
这样,所有组件都可以直接使用`$eventHub`和`$config`对象。例如,在组件的`mounted`生命周期钩子中:
```javascript
mounted() {
console.log(this.$config.yourKey)
}
```
此外,如果使用Webpack,还可以通过`DefinePlugin`来定义全局常量,避免直接修改Vue对象:
```javascript
new webpack.DefinePlugin({
CONFIG: require('path/sysconfig.json')
})
```
这样,`CONFIG`对象将在全局范围内可用。这些技术可以帮助开发者在Vue 2.0中有效地进行组件间通信,提高代码的可维护性和复用性。