vue2.0组件间事件派发与接收

最新推荐文章于 2024-08-26 15:36:11 发布

转载最新推荐文章于 2024-08-26 15:36:11 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008018314

文章标签：

#javascript #ViewUI

本文介绍Vue.js中组件间通信的方法，特别是在Vue 2.0中如何替代$dispatch和$broadcast来实现组件间通信，通过使用集中式的事件处理器，即事件总线的方式进行通信。

在vue的开发中，经常会在两个组件间进行事件的通信

在vue1.0中我们使用$dispatch 和 $broadcast

child.vue:

this.$dispatch('eventName',this.data);

parent.vue:

event:{
    'eventName':function(data) {
        // 执行的方法
    }
}

但是在vue2.0中$dispatch 和 $broadcast被弃用，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱,并且这只适用于父子组件间的通信。官方给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口
在vue2.0中在初始化vue之前，给data添加一个名字为eventhub 的空vue对象

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})

某一个组件内调用事件触发

this.$root.eventHub.$emit('eventName', event.target);

另一个组件内调用事件接收, 在组件销毁时接除事件绑定,使用$off方法

created() {
    this.$root.eventHub.$on('eventName',(target) => {
    this.functionName(target)
  });
},
method:{
    functionName(target) {
    console.log(target);
    }
}