在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 发送消息