vue事件总线(EventBus)学习

一、背景

我们知道,在vue组件之间传递数据有很多方式,如:父子组件通信,隔代组件通信,路由传参,vuex等等,但是此时我们有两个同级(或者毫无关系的)组件,即兄弟组件之间通信,我们应该怎么办?那我们可以采取事件总线(EventBus)的方式解决,当然上述的其他方法也是可以解决的.

二、事件总线

顾名思义,就是组件相同事件的集合,可以向这个集合里注入一些事件,同时其他组件可以从这个集合里接收事件,这样两个不相干的组件可以进行通信.

三、具体代码

1.新建bus.js文件
代码如下:

import Vue from "vue";

export const bus = new Vue()

2.在A组件
代码如下:

3.在B组件
代码如下:

四、销毁事件总线

1.销毁某一个事件
代码如下:

import { bus } from "@/util/bus";

bus.$off('事件名')

2.销毁全部事件
代码如下:

import { bus } from "@/util/bus";

bus.$off()