Vue3 非父子组件之间通信
前言
vue3 中父子组件之间通信的方式有好几种，而有时需要进行非父子组件的通信，今天我们就讨论其中的两种。
一、emit、on
1、需要引入三方件 mitt
npm i mitt
2、
a：新建一个 js 文件 mitt.js
import mitt from 'mitt'
const bus = mitt();
export default mitt
b：如果不想这么麻烦，我们也可以在 main.js 中进行全局引用
import mitt from 'mitt'
const bus = mitt();
app.config.globalProperties.$bus = bus;
3、在 a.vue 中添加 emit 触发事件
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
proxy.$bus.emit( "toggle", param); //第一个参数是事件名称，第二个是传入参数
4、在 b.vue 中使用 on 监听
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
proxy.$bus.on( "toggle", (param) => {
console.log(param);
});