vue 中使用eventBus兄弟组件传递事件 实现方式

eventBus 适用于同级组件或者互无关系的页面之间通信，可以传递事件以及数据

1.在项目中新建一个JS文件 eventBus.js

image.png

2.在发送事件的页面

## 在<script>下引入 eventBus 
import eventBus from "@/utils/eventBus.js"; 

## 通过$emit() 传递事件
eventBus.$emit('eventName',{params:'传递的参数'})

3.在另一个一面的 mounted内 接收事件

  mounted() {
    ##在eventBus内的this会改变指向，所以声明that， $on 开启eventBus 监听

    let that = this;
    eventBus.$on("eventName",function (data) {
      console.log(data) // 打印结果 = '传递的参数'
    });
  }

4.接收事件的组件没挂载之前仍会接受 $emit，会排队等待dom挂载后 接收全部之前发出的事件，会报错 ！

## 这是接收事件的页面

 mounted() {
    let that = this;
    eventBus.$on("eventName",function (data) {
      console.log(data) // 打印结果 = '传递的参数'
    });
  },
beforedestroy(){
## 在beforedestroy 关闭 eventBus监听

 eventBus.$off("eventName");
}

【有收获请点个赞哦~~】