Vue3兄弟组件传值（同级别组件传值Vue3）

简介：

1. Vue3兄弟组件传值，我们可以使用"Mitt"插件来实现。通过使用事件总线的方式，我们可以将数据从一个组件传递给另一个组件，实现兄弟组件之间的通信。

2. 利用 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则会在挂载后监听这个事件，一旦接收到数据就会在控制台打印出来，实现了兄弟组件间的通信。