vue3 兄弟组件通信

   在vue2 中兄弟组件通信如果不采用vuex,一般在采用事件总线的方式进行通信；在vue3中取消事件总线的方法，推荐插件 mitt(https://www.npmjs.com/package/mitt)

一、安装mitt插件

npm install --save mitt
// or
yarn add mitt -- save

 二、引入mitt

在src/utils 路径下创建 bus.js文件，文件内容如下：

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

三、应用mitt

监听全部事件写法：emitter.on('*', (type, e) => console.log(type, e) )；* 代表监听事件的名称；

清除所有事件写法：emitter.all.clear()

1、在页面中应用 组件1 和组件2，代码如下：

<template>
  <h2>兄弟组件通信</h2>
  <child />
  <br />
  <child-2 />
</template>

<script setup>
import child from "./components/child.vue";
import child2 from "./components/child2.vue";
</script>

2、组件1，代码如下：

<template>
  <div class="container">
    组件1

    <el-button type="primary" @click="sendMsg">发送消息到组件2</el-button>
  </div>
</template>

<script setup>
// 引入
import emitter from "../../../utils/bus";

const sendMsg = () => {
  emitter.emit("onMessage", {
    title: "你好吗？组件2",
  });
};
</script>
<style scoped>
.container {
  border: 1px solid #ccc;
  padding: 8px 4px;
}
</style>

3、组件2，代码如下：

<template>
  <div class="container">
    组件2
    <div>接收消息：{{ message }}</div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
// 引入
import emitter from "../../../utils/bus";

const message = ref("");

emitter.on("onMessage", (val) => {
  console.log("打印：", val);
  const { title } = val;
  message.value = title;
});

onBeforeUnmount(() => {
  emitter.off("onMessage"); //关闭
});
</script>

<style scoped>
.container {
  border: 1px solid #ccc;
  padding: 8px 4px;
}
</style>

四、运行结果

图一    组件1未向组件2发送消息 

图 二  组件1 向组件2 发送消息