Vue3 事件总线

为什么要使用总线事件

答：一般父子组件通信，就直接使用事件抛出emit就好，但是如果两个组件没有关系 或者 关系嵌套层级很多，就要采用总线事件系统。

总线事件系统逻辑：

A组件抛出事件名a，B组件里面，在mounted生命周期监听事件名a，并做出处理。

Vue2 创建方式

import Vue from 'vue';
Vue.prototype.$bus = new Vue();

为什么这样使用呢？

因为 在 Vue2 API 中实例方法/事件 中，存在这个 vm.$on 和vm.$emit 两个接口

 

vue3官网推荐使用 mitt 第三方库

npm install --save mitt

//main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

//挂载事务总线
import mitt from 'mitt'
app.config.globalProperties.$bus = new mitt();

app.use(Vue3DraggableResizable);
app.mount('#app')

在其它组件使用

//事件抛出
this.$bus.emit("closeCommunicateFrame");


//事件接收
this.$bus.on('closeCommunicateFrame',()=>{
     this.communicateObj.isShow = false;
})

========================== 分割线 ======================================

**Vue3 官网 关于事件总线给出的说明**

根据官网说明，不鼓励使用总事件系统，优先使用其它替代方案去解决