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

luckyw 发布于2019-08-30 13:19 / 3526人阅读

摘要：官方给出的最简单的升级建议是使用集中的事件处理器而且也明确说明了一个空的实例就可以做到因为实例实现了一个事件分发接口在中在初始化之前，给添加一个名字为的空对象某一个组件内调用事件触发另一个组件内调用事件接收在组件销毁时接除事件绑定使用方法

在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);
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115474.html

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

摘要：官方给出的最简单的升级建议是使用集中的事件处理器而且也明确说明了一个空的实例就可以做到因为实例实现了一个事件分发接口在中在初始化之前，给添加一个名字为的空对象某一个组件内调用事件触发另一个组件内调用事件接收在组件销毁时接除事件绑定使用方法在vue的开发中，经常会在两个组件间进行事件的通信在vue1.0中我们使用$dispatch 和 $broadcast child.vue: th...

JayChen 2019-08-20 13:30 评论0 收藏0
vue2.0组件间事件派发与接收

摘要：官方给出的最简单的升级建议是使用集中的事件处理器而且也明确说明了一个空的实例就可以做到因为实例实现了一个事件分发接口在中在初始化之前，给添加一个名字为的空对象某一个组件内调用事件触发另一个组件内调用事件接收在组件销毁时接除事件绑定使用方法在vue的开发中，经常会在两个组件间进行事件的通信在vue1.0中我们使用$dispatch 和 $broadcast child.vue: th...

My_Oh_My 2019-08-01 16:10 评论0 收藏0
Vue2.0父子组件间事件派发机制

摘要：从过来的都知道，在中，父子组件间事件通信的和被移除了。通过广播和事件分发的机制，就显得比较混乱了。在父组件中中然后，在子组件中，主要在任意事件回调中使用来触发自定义的事件，后面还可以加上参数传给父组件。从vue1.x过来的都知道，在vue2.0中，父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解，并且在组件结...

xietao3 2019-08-21 18:40 评论0 收藏0
聊聊Vue.js组件间通信的几种姿势

摘要：子组件向父组件通信方法一使用事件父组件向子组件传递事件方法，子组件通过触发事件，回调给父组件。非父子组件兄弟组件之间的数据传递非父子组件通信，官方推荐使用一个实例作为中央事件总线。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 评论0 收藏0