vue多级组件通讯方案-EventBus

我们在父子组件传参时，经常是在子组件emit传参给父组件

有多级传参情况一般都会用vuex这里就不细说vuex了

其实我们也可以使用EventBus实现组件传参、事件调用

以下就以登录为例

本项目是有个弹框授权登录组件，当点击授权登录时，关闭弹框，任然停留在本页面。因为已经登录了所以需要调用一些需要token的接口。

现在该怎么监听组件是否点击授权，然后监听回调事件呢

一、在main.js中注册一个全局对象

Vue.prototype.$BusEvent = new Vue()

二、触发事件

当点击授权是弹出框组件触发事件，并传参

this.$BusEvent.$emit("auth", param1,param2,...);

三、监听事件

在页面监听是否触发了 auth事件，获取子组件的参数，自己就可以使用了

 this.$BusEvent.$on("auth", async (param1,param2,...) => {
      //这里就写回调成功需要干的事情
   
}

其实这和普通的父子组件传参相似，了解父子组件传参的一般都能理解