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);
}); 

二、全局组件