方法一，让父组件当中转站，走父子通信的组合逻辑

terry 20小时前阅读数 15 #Vue

在Vue3项目开发里,兄弟组件通信是很常见的需求——比如头部导航和侧边栏要共享用户登录状态，或者两个功能模块之间要传递操作指令，但兄弟组件不像父子组件那样有直接的 props 或 emit 关系，新手往往不知道从哪入手，这篇文章就用问答的形式，把Vue3兄弟组件通信的常用方法拆明白，帮你解决实际开发里的跨组件传值难题。

兄弟组件本身没有直接的通信通道,所以最直观的思路是「找个中间人」——也就是它们的共同父组件，原理很简单：兄弟A把数据传给父组件，父组件再把数据传给兄弟B，相当于用两次“父子通信”拼出兄弟通信。

举个实际开发的例子：假设页面上有个组件，点击后要把消息传给组件显示，具体步骤分三步：

兄弟A用 emit 把数据交给父组件
父组件把收到的数据存起来（用 ref 或 reactive）
父组件通过 props 把数据传给兄弟B

来看代码实现（以单文件组件为例）：

父组件（Father.vue）负责承接和转发：

```vue ```

兄弟A（ButtonA.vue）负责触发事件传值：

```vue ```

兄弟B（ShowMsgB.vue）负责接收父组件传来的props：

```vue ```

这种方法的优点很明显：完全基于Vue原生的父子通信逻辑，代码好理解、好维护，适合小型项目或者兄弟组件通信频率不高的场景，但缺点也很直观——如果兄弟组件太多、通信太频繁，父组件会变成“传值工具人”，代码里全是转发逻辑，冗余又难维护。

用Pinia（或Vuex）做全局状态管理，让数据“活”在仓库里

如果项目里兄弟组件通信场景多,甚至跨页面、跨层级，光靠父组件中转就不够用了，这时候可以用状态管理库，比如Vue3官方推荐的Pinia（比Vuex更轻量简洁），原理是把共享数据放到全局仓库，不管哪个组件，只要能访问仓库，就能读、改数据。

举个常见需求：做网站的“深色/浅色主题切换”，按钮组件和显示组件是兄弟，要共享主题状态，用Pinia的步骤是：

新建Pinia仓库,定义要共享的state和修改它的action
兄弟A（切换按钮）调用仓库的action改状态
兄弟B（显示组件）从仓库里读最新状态

来看代码实现：

第一步,创建Pinia仓库（themeStore.js）：

```js import { defineStore } from 'pinia'

// 定义名为“theme”的仓库 export const useThemeStore = defineStore('theme', { // state 是要共享的数据 state: () => ({ isDark: false // 初始是浅色主题 }), // actions 是修改state的方法（支持异步） actions: { toggleTheme() { this.isDark = !this.isDark // 切换主题 } } })


<p>第二步，兄弟A（ThemeToggle.vue）触发状态修改：</p>
```vue
<template>
  <button @click="changeTheme">切换主题</button>
</template>
<script setup>
// 引入仓库
import { useThemeStore } from './themeStore.js'
const themeStore = useThemeStore()
const changeTheme = () => {
  // 调用仓库的action修改state
  themeStore.toggleTheme()
}
</script>

第三步,兄弟B（ThemeDisplay.vue）读取最新状态：

```vue ```

这种方法的优点是：适合复杂项目里多组件跨层级通信，数据集中管理，逻辑清晰，还能配合DevTools调试；缺点是如果只是简单的兄弟通信，引入状态管理有点“杀鸡用牛刀”，会增加项目的学习和维护成本。

事件总线（用mitt库），搞个“全局消息群”

Vue2里有内置的事件总线（this.$bus），但Vue3把这功能砍了，不过我们可以用第三方库mitt自己搞一个「事件总线」——原理是创建一个全局的“消息中心”，组件可以在上面“发消息（emit）”和“听消息（on）”，兄弟组件通过这个中心通信。

举个例子：组件点击后发消息，组件接收并显示，步骤如下：

安装mitt：npm i mitt
创建事件总线实例（比如eventBus.js）
兄弟A在总线里发事件,带数据
兄弟B在总线里监听事件,拿数据

代码实现：

第一步,创建事件总线（eventBus.js）：

```js import mitt from 'mitt' // 导出 mitt 实例，作为全局事件总线 export default mitt() ```

第二步,兄弟A（SendMsgA.vue）发消息：

```vue ```

第三步,兄弟B（ReceiveMsgB.vue）听消息：

```vue ```

这种方法的优点是：灵活！不需要依赖父组件或状态管理，想在哪发、在哪听都行，适合中小型项目的兄弟通信；缺点是：如果不手动移除事件监听（比如onUnmounted里off），容易内存泄漏；而且组件多了之后，事件名容易冲突，维护起来有点头大。

provide / inject + 响应式数据，让祖先组件当“数据供应商”

Vue的provide和inject是给“祖先-后代”组件通信用的——祖先组件用provide提供数据，后代组件用inject注入数据，如果兄弟组件有共同的祖先（比如App.vue），可以让祖先提供响应式数据（ref或reactive），兄弟组件作为后代，一个改数据、一个读数据，实现通信。

举个例子：App.vue是所有组件的祖先，组件修改共享消息，组件显示消息，步骤：

祖先组件（比如App.vue）用provide提供响应式数据
兄弟A inject 数据后修改它
兄弟B inject 数据后显示它

代码实现：

祖先组件App.vue提供数据：

```vue ```

兄弟A（ChangeMsgA.vue）修改数据：

```vue ```

兄弟B（ShowMsgB.vue）显示数据：

```vue ```

这种方法的优点是：能跨多级组件通信，不用像父组件中转那样每层传props（避免props drilling）；缺点是：数据流向不直观，调试时很难追踪“谁改了数据”，而且如果共同祖先层级太深，代码可读性会下降。

咋选？不同场景对应不同方法

看完四种方法,你可能会纠结“该用哪个”，其实得看项目场景和需求：

如果是简单场景（就两三个兄弟组件，传值不多）→ 选「父组件中转」，逻辑简单好维护；
如果是复杂项目（多组件跨层级，还有很多共享状态）→ 选「Pinia/Vuex」，数据集中管理更专业；
如果是中等规模（兄弟通信多，但不想引入状态管理）→ 选「事件总线（mitt）」，但要记得在组件卸载时移除监听；
如果兄弟组件的共同祖先很明确（比如都在App.vue下面）→ 选「provide/inject + 响应式数据」，减少props传递的麻烦。

还可以结合Vue3的Composition API，把通信逻辑封装成自定义Hook，让代码更复用，比如把事件总线的emit和on封装成useEventBus hook，或者把provide/inject的逻辑封装成useSharedData hook，这样兄弟组件用的时候只要调hook，代码更简洁。

没有最好的方法,只有最适合场景的方法，实际开发中，先分析需求复杂度、组件层级关系，再选对应的通信方式，才能写出好维护、高性能的代码～