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. E v e n t B u s . EventBus. EventBus.emit(发送的事件名,传递的参数)
已经创建好EventBus后我们就需要向它发送需要传递的事件,以便其他组件可以向EventBus获取。
例子:有两个组件A和B需要通信,他们不是父子组件关系,B事件需要获得A事件里的一组数据data
<button @click=“sendMsg”>发送MsgA
三、接收事件
接收事件的语法:this. E v e n t B u s . EventBus. EventBus.on(监听的事件名, 回调函数)
A组件已经向全局事件总线EventBus发送了一个aMsg事件,这时B组件就可以去aMsg监听这个事件,并可以获得一些数据。
{{msgB}}