Vue3跨组件间通信

前言

vue3移除了 $on，$off 和 $once 等实例方法，vue3中使用EventBus创建全局事件侦听器的方法已经失效，我们可以使用官方推荐的库替代。

1.安装这个库 github.com/developit/m…

2.mian.js挂载全局

const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.$emitter = emitter;

3.需要触发事件的组件

import { getCurrentInstance } from 'vue'; //获取组件实例
export default {
    ...
    setup(props) {
        const { proxy } = getCurrentInstance();
        proxy.$emitter.on('foo', e => console.log('foo', 'wocao'));
        return {};
    },
};

4.触发事件的组件

import { getCurrentInstance } from 'vue';
export default {
    setup() {
        ...
        const { proxy } = getCurrentInstance();
        function clickFn() {
            proxy.$emitter.emit('foo', { a: 'b' });
        }
        return { clickFn };
    },
};