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