vue中使用bus总线（eventbus）实现兄弟组件间的通讯

需求

vue兄弟组件或者互不关联的组件间的通讯

基本实现原理

使用bus总线eventbus来实现，很简单

上代码

1. 封装公共bus.js文件

import Vue from 'vue'
export default new Vue

有木有感觉简单无脑，实际上就是实例化一个vue文件，把事件挂载在新实例化的Vue下面，通过$emit通知修改，在其他组件的mounted生命周期中使用$on接受通知并作出相应的响应

2. 使用通讯总线

发送通知

//  先引入bus.js
import Bus from "@/utils/bus"
Bus.$emit("msg", {
  //  填写需要传递的数据
})
//  或者不传对象
Bus.$emit("msg", '你好')

接收通知

//  先引入bus.js
import Bus from "@/utils/bus"
Bus.$on("msg", (data) => {
  console.log(data)
})

需要注意的是事件名称要一致，并且多个事件名不要重复

结束语

不到迫不得已，不要滥用通讯总线，另外还有一个小坑 解决vue使用bus被多次触发问题