Vue3 兄弟组件通信

背景

在搭建云平台demo的时候，有添加容器的功能，而添加完容器后，展示容器信息的组件应接受该事件，并修改数据或重新请求列表，而在规划组件时考虑到可拓展性和组件的复杂程度，将”添加容器按钮“和”展示容器列表“作为了主页面的两个子组件，即相互之间是兄弟组件，如何进行兄弟组件间事件通信？（项目体量较小，不考虑通过store通信）

解决

工具

经查阅，Vue2.x使用EventBus事件总线进行兄弟组件通信，而在Vue3中事件总线模式已经被移除，官方建议使用外部实现了事件触发器接口的库，例如mitt或tiny-emitter

对比

相比Vue实例上的EventBus，mitt.js体量更小，支持全部事件的监听和批量移除，且不依赖Vue实例，可以跨框架使用

使用

npm install --save mitt

方式一：在原型中声明

在main.ts中注册挂载到全局

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
import router from "./router";

const app = createApp(App)

// vue3挂载到全局
app.config.globalProperties.$mitt = mitt();

app.use(router).mount('#app')

代码不如方式二清晰直观，这里不做过多介绍

方式二：组件中引用

项目采取该方式

在utils中新建bus.ts文件。（utils常来存放整个项目共用的功能函数或文件等）

import mitt from "mitt";
const emiter = mitt();
export default emiter;

发送接受信息

import emitter from '@/utils/bus'
//发送新建镜像事件
emitter.emit("newImage");
//监听新建镜像事件
onMounted(() => {
    emitter.on("newImage", () => {
        getIms();
    });
})
//移除监听
onBeforeMount(() => {
    emitter.off("newImage");
});