前言

vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念

  • 公众号：前端印象
  • 不定时有送书流动，记得关注~
  • 关注后回复对应文字支付：【面试题】、【前端必看电子书】、【数据结构与算法残缺代码】、【前端技术交换群】

注释

EventBus的简介

EventBus又称事件总线，相当于一个全局的仓库，任何组件都能够去这个仓库里获取事件，如图：

EventBus的应用

废话不多说，间接开始应用EventBus

一、初始化

要用EventBus，首先要初始化一个EventBus，这里称它为全局事件总线。

  • 第一种初始化办法
import Vue from 'vue'//因为是全局的一个'仓库'，所以初始化要在全局初始化const EventBus = new Vue()
  • 第二种初始化办法(本文选用这种初始化办法)
//在曾经创立好的Vue实例原型中创立一个EventBusVue.prototype.$EventBus = new Vue()

二、向EventBus发送事件

发送事件的语法：this.$EventBus.$emit(发送的事件名,传递的参数)

曾经创立好EventBus后咱们就须要向它发送须要传递的事件，以便其余组件能够向EventBus获取。
例子：有两个组件A和B须要通信，他们不是父子组件关系，B事件须要取得A事件里的一组数据data

<!-- A.vue 这里是以模块化的形式解说的，即A组件和B组件别离各自一个.vue文件,所以代码中会有导入的语法--><template>    <button @click="sendMsg">发送MsgA</button></template><script> export default {  data(){      return{          MsgA: 'A组件中的Msg'      }  },  methods: {    sendMsg() {      /*调用全局Vue实例中的$EventBus事件总线中的$emit属性，发送事      件"aMsg",并携带A组件中的Msg*/      this.$EventBus.$emit("aMsg", this.MsgA);    }  }}; </script>

三、接管事件

接管事件的语法：this.$EventBus.$on(监听的事件名, 回调函数)

A组件曾经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就能够去aMsg监听这个事件，并能够取得一些数据。

<!-- B.vue --><template>  <!-- 展现msgB -->  <p>{{msgB}}</p>  </template><script> export default {  data(){    return {      //初始化一个msgB      msgB: ''    }  },  mounted() {    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送    到事件总线中的aMsg事件*/    this.$EventBus.$on("aMsg", (data) => {      //将A组件传递过去的参数data赋值给msgB      this.msgB = data;    });  }};</script>

B组件展现后果：

A组件中的Msg

这样，B组件就轻松接管到了A组件传递过去的参数，并胜利展现了该参数，这样是不是就很简略的解决了各组件之间的通信呢？尽管EventBus是一个很轻便的办法，任何数据都能够往里传，而后被别的组件获取，然而如果用不好，容易呈现很重大的BUG，所以接下来咱们就来解说一下移除监听事件。

四、移除监听事件

在上一个例子中，咱们A组件向事件总线发送了一个事件aMsg并传递了参数MsgA，而后B组件对该事件进行了监听，并获取了传递过去的参数。然而，这时如果咱们来到B组件，而后再次进入B组件时，又会触发一次对事件aMsg的监听，这时工夫总线里就有两个监听了，如果重复进入B组件屡次，那么就会对aMsg进行屡次的监听。

总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了屡次监听，EventBus容器中有很多个截然不同的事件监听器这时就会呈现，事件只触发一次，但监听事件中的回调函数执行了很屡次

  • 解决办法：在组件来到，也就是被销毁前，将该监听事件给移除，免得下次再反复创立监听
  • 语法：this.$EventBus.$off(要移除监听的事件名)
<!-- B.vue --><template>  <!-- 展现msgB -->  <p>{{msgB}}</p>  </template><script> export default {  data(){    return {      //初始化一个msgB      msgB: ''    }  },  mounted() {    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送    到事件总线中的aMsg事件*/    this.$EventBus.$on("aMsg", (data) => {      //将A组件传递过去的参数data赋值给msgB      this.msgB = data;    });  },  beforeDestroy(){    //移除监听事件"aMsg"      this.$EventBus.$off("aMsg")  }};</script>

结束语

好了，对于vue中的事件总线的解说就到这里了，这也是我明天在做我的项目时用到的一个小知识点，接下来附上一张我因为没有及时移除事件监听，导致我每重进组件一次就报错48条错误信息的图，心愿大家在我的文章中能血啊都一些货色，并且不要再犯我的这种低级谬误。