在vue的开发中,经常会在两个组件间进行事件的通信
在vue1.0中我们使用$dispatch 和 $broadcastchild.vue:
this.$dispatch('eventName',this.data);
parent.vue:
event:{ 'eventName':function(data) { // 执行的方法 }}
但是在vue2.0中$dispatch 和 $broadcast被弃用,因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱,并且这只适用于父子组件间的通信。官方给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口
![image.png image.png](https://upload-images.jianshu.io/upload_images/12577968-c627d7b03a88daac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: new Vue() }})
某一个组件内调用事件触发
this.$root.eventHub.$emit('eventName', event.target);
另一个组件内调用事件接收, 在组件销毁时接除事件绑定,使用$off方法
介绍一个全栈开发交流学习圈,欢迎加入Q群:864305860created() { this.$root.eventHub.$on('eventName',(target) => { this.functionName(target) });},method:{ functionName(target) { console.log(target); }}