vue兄弟组件间通信&eventbus遇到的问题（多次触发、第一次不触发）-白红宇

vue兄弟组件间通信&eventbus遇到的问题（多次触发、第一次不触发）

阅读量：4030 次

发布时间：2019-05-24

本文共 2203 字，大约阅读时间需要 7 分钟。

EventHub 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。

形象生动讲解：。

EventHub

想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。

而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个：监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能：

let eventHub = new Vue()// 监听eventHub.$on('eventName', (data) => {
       console.log('Trigger this event and receive ' + data)})// 广播eventHub.$emit('eventName', data)// 去掉监听eventHub.$off('eventName')

其本质上这里就借用了 Vue 的事件监听功能来完成 EventHub 的。

下面介绍一下怎么实现的：

依赖注入

eventHub是个全局变量呀，难道我们要将它放在入口 main.js 里面初始化么？还是放在 Vue.prototype 里直接用 this.eventHub 来使用呢？

在我们使用的antd的vue框架中初始化 EventHub，并使用 provide 对外暴露这个 EventHub。

APP.vue文件中敲如下代码：

import Vue from "vue";export default {
     name: "App",  components: {
       GrandParent  },  data() {
       return {
         eventHub: new Vue()    };  },  provide() {
       return {
         eventHub: this.eventHub    };  },  methods: {
       setRandomValue() {
         this.eventHub.$emit("update:msg", Math.random() * 100);    }  }};

然后在需要监听的组件里用 inject 注入这个依赖，并在 created 里添加事件监听。

export default {
     inject: ["eventHub"],  data() {
       return {
         msg: ""    };  },  created() {
       this.eventHub.$on("update:msg", msg => {
         this.msg = msg;    });  }};

最终的结果是在 App 里修改 msg，添加监听事件的子组件都会获取最新的 msg，并用其再更新自己的数据或者状态。

这里网上有大佬做了个demo，链接抛出来：

eventHub问题

第一次触发的时候，接收参数传值的界面的on事件没有被触发

为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。

原因及解决办法

当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候，B其实是没有监听到的，

当你从页面A到页面B跳转的时候，发生了什么？首先是先B组件先created然后beforeMount接着A组件才被销毁，A组件才执行beforeDestory，以及destoryed

所以，我们可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经触发了

修改如下：在beforeDestory生命周期里，$emit事件：

beforeDestroy () {
     this.eventHub.$emit('update:msg',this.data) }

因为B页面$on事件是不会自动清楚销毁的，需要我们手动来销毁，所以我在B组件页面中添加this.eventHub.$off来关闭，销毁后就不存在执行多次的情况了。代码如下：

// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。   beforeDestroy () {
        this.eventHub.$off('update:msg')     },

总结

用eventBus 来进行页面组件之间的数据传递，需要注意三点：

事件名必须保持统一，也就是上述例子的update:msg；

组件A$emit事件应在beforeDestory生命周期内；

其次，组件B内的$on记得要销毁。

最后加个链接，大佬介绍的vue组件六种通讯方式，，其实vue组件间通讯最好的方法是vuex。具体的用法自行百度学习咯。

转载地址：http://jqlbi.baihongyu.com/

你可能感兴趣的文章