vue3组合式api bus总线式通信

vue2中可以创建一个 vue 实例，做为总结来完成组件间的通信
但是在vue3中，这种方法是不能使用的。因为vue3中main.js中，使用的createApp() 没有机会再写 new Vue了

但是我们可以使用 mitt 的插件来解决这个问题

vue3 bus组件的用法

安装 mitt

npm install mitt

在这里插入图片描述

封装 mitt

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

组件关系

在这里插入图片描述

父组件

<template><div class="parent">我是父组件（这里要使用 eventBus 方式， 使两个子组件进行通信）<hr/><son1></son1><hr/><son2></son2></div>
</template><script setup>import {ref, reactive} from "vue";import son1 from "./son1.vue";import son2 from "./son2.vue";
</script>

子组件1（接收事件方）中的数据会被子组件2，触发修改

子组件中首先要引入 bus
并且在 onMounted 中使用 on方法，绑定事件名称，及处理事件的函数

<template><div class="son1">这是第一个儿子大儿子的车牌是 {{carNum}}</div>
</template><script setup>
import {ref,onMounted} from "vue";
import bus from "@/bus";
let carNum = ref("888888")
onMounted(()=>{bus.on("changeCarNum",(number)=>{carNum.value = number;})
})
</script>

子组件2（发起事件方）

引入 bus
绑定button 的点击事件，并在事件中，通过 bus.emit 触发子组件1的事件

<template><div class="son2">这是第二个儿子<button @click="changeson1CarNum" type="button">点击二儿子的按钮，使大儿子的车牌变成222222</button></div>
</template><script setup>import bus from "@/bus";const changeson1CarNum = ()=>{bus.emit("changeCarNum","222222")}
</script>