eventBus 适用于同级组件或者互无关系的页面之间通信,可以传递事件以及数据
1.在项目中新建一个JS文件 eventBus.js
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");
}
【有收获请点个赞哦~~】