vue 事件总线EventBus的概念、使用以及注意点

@零一

发布于 2021-01-29 16:05:52

1.5K0

发布于 2021-01-29 16:05:52

vue 事件总线

前言

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

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

正文

EventBus的简介

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

EventBus的使用

废话不多说，直接开始使用EventBus

一、初始化

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

第一种初始化方法

import Vue from 'vue'
//因为是全局的一个'仓库'，所以初始化要在全局初始化
const EventBus = new Vue()

第二种初始化方法(本文选用这种初始化方法)

//在已经创建好的Vue实例原型中创建一个EventBus
Vue.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>