简述：
-
Vue3兄弟组件传值，我们可以使用"Mitt"插件来实现。通过使用事件总线的方式，我们可以将数据从一个组件传递给另一个组件，实现兄弟组件之间的通信。
-
或者利用 Vue 3 自身的provide 和 inject 响应式 API 来实现兄弟组件之间的数据共享和通信。这里来给大家介绍下vue3中，兄弟组件传值的两种方式。
一、在 Vue 3 中，我们可以使用 setup() 函数和 provide 和 inject 响应式 API 来实现兄弟组件之间的数据共享和通信。这里我们不使用任何外部库，仅利用 Vue 3 自身的功能。
1、首先，我们创建一个提供共享数据的组件（ProviderComponent.vue），它将使用 provide 函数来提供数据：
组件1：ProviderComponent.vue
<!-- ProviderComponent.vue -->
<template>
<div>
<p>Shared Data: {{ sharedData }}</p>
<slot></slot>
//注意这里的插槽，用于存放兄弟组件
</div>
</template>
<script setup>
import { ref, provide } from 'vue';
const sharedData = ref('测试数据');
provide('sharedData', sharedData);
</script>
2、然后，我们创建两个兄弟组件（SiblingA.vue 和 SiblingB.vue），它们都将通过 inject 来接收提供的数据，并且可以进行修改：
组件2：SiblingA.vue
<!-- SiblingA.vue -->
<template>
<div>
<p>组件 A</p>
<p>{{ sharedData }}</p>
<button @click="increaseData">点击触发</button>
</div>
</template>
<script setup>
import { inject } from 'vue';
// 使用 inject 函数接收提供的数据
const sharedData = inject('sharedData');
const increaseData = () => {
sharedData.value = "更改后的数据";
}
</script>
组件3：SiblingA.vue
<!-- SiblingB.vue -->
<template>
<div>
<p>组件 B</p>
<p>Shared Data from Provider: {{ sharedData }}</p>
</div>
</template>
<script setup>
import { inject } from 'vue';
// 使用 inject 函数接收提供的数据
const sharedData = inject('sharedData');
</script>
3、最后，我们在父组件ParentComponent.vue中使用 ProviderComponent 和两个兄弟组件：
组件4：ParentComponent.vue
<!-- ParentComponent.vue -->
<template>
<div>
<ProviderComponent>
<SiblingA />
<SiblingB />
</ProviderComponent>
</div>
</template>
<script setup>
import ProviderComponent from './ProviderComponent.vue';
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';
</script>
4、注意这里一共需要用到4个组件：
- 共享数据的组件： ProviderComponent.vue
兄弟组件1： SiblingA.vue兄弟组件2： SiblingB.vue父组件： ParentComponent.vue
看下效果：
可以看到兄弟组件，通过中间件的方式，传值成功。
小结：
-
在这实例中，ProviderComponent共享组件 提供了 sharedData数据，并通过provide函数传递数据，而 SiblingA 和 SiblingB 都使用inject函数注入了这个数据。
-
当 SiblingA 中的按钮被点击时，它会增加共享组件 sharedData 的值，这个变化也会反映到 SiblingB 中，因为它们是同一个响应式引用的不同视图。
-
这就是使用 Vue 3 的 provide 和 inject API，以及 setup() 函数和 ref 来实现兄弟组件之间通信的一种方式。这种方法避免了使用全局状态管理库，并且保持了组件之间的解耦。
二、上面使用Vue 3 自身的AP实现了兄弟组件传值，这里我们可以使用 Vue3 的 setup 语法糖结合第三方库 mitt 来实现。mitt是一个小巧且快速的TypeScript实现的EventEmitter 3封装库，专门用于Vue 3应用中的组件通信。在Vue 2.x中，通常使用EventBus进行组件间的通信，但在Vue 3.x中，推荐使用mitt作为替代方案。
1、首先，确保已经安装好mitt库，安装命令如下；
npm install mitt
//或者
npm install mitt --save
2、创建事件总线。在项目中创建一个单独的js文件，例如eventBus.js，用于初始化并暴露 mitt 实例作为全局事件总线：
import mitt from 'mitt';
const bus = mitt();
export default bus;
3、兄弟组件通信实现。创建兄弟组件，假设我们有两个兄弟组件A和B，组件A需要向组件B传递数据。在组件A中，通过导入事件总线，并在setup函数中发布事件：
// ComponentA.vue
<template>
<!-- 省略模板内容 -->
<button @click="choseBusSetData">发送数据给兄弟组件</button>
</template>
<script setup>
import { ref } from 'vue';
import bus from '@/utils/eventBus.js'; // 引入事件总线
const dataToEmit = ref('Hello, Brother!');
function choseBusSetData() {
bus.emit('brotherEvent', dataToEmit.value) // 发布事件并附带数据
}
</script>
4、接着，在组件B中，同样引入事件总线并在setup函数中订阅该事件：
// ComponentB.vue
<script setup>
import { onMounted, onUnmounted } from 'vue';
import bus from '@/utils/eventBus.js'; // 引入事件总线
let receivedData = '';
onMounted(() => {
// 订阅事件
const off = bus.on('brotherEvent', (data) => {
receivedData = data
console.log('Received data from brother:', receivedData)
// 在这里可以更新组件B的状态或者执行其他业务逻辑
})
// 当组件卸载时，取消事件订阅以避免内存泄漏
onUnmounted(() => {
off()
})
})
</script>
5、这样，当组件A中的按钮被点击时，会触发emitData方法，通过事件总线发送数据。而组件B则会在挂载后监听这个事件，一旦接收到数据就会在控制台打印出来，实现了兄弟组件间的通信。
