vue如何实现兄弟通信
Vue 中实现兄弟组件通信的方法
使用事件总线（Event Bus）
创建一个空的 Vue 实例作为中央事件总线，兄弟组件通过触发和监听事件实现通信。
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();组件 A 触发事件：
import { EventBus } from './event-bus.js';
EventBus.$emit('event-name', data);组件 B 监听事件：
import { EventBus } from './event-bus.js';
EventBus.$on('event-name', (data) => {
// 处理数据
});使用 Vuex 状态管理
适用于复杂应用场景，通过集中式存储管理组件间共享状态。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
sharedData: null
},
mutations: {
updateData(state, payload) {
state.sharedData = payload;
}
}
});组件 A 提交变更：
this.$store.commit('updateData', newData);组件 B 获取数据：
computed: {
sharedData() {
return this.$store.state.sharedData;
}
}通过父组件中转
兄弟组件拥有共同的父组件时，可通过父组件进行数据中转。
父组件模板：
<child-a @update="handleUpdate"></child-a>
<child-b :data="sharedData"></child-b>父组件逻辑：
data() {
return {
sharedData: null
};
},
methods: {
handleUpdate(data) {
this.sharedData = data;
}
}组件 A 触发事件：
this.$emit('update', data);使用 $refs 直接访问
适用于需要直接操作兄弟组件方法的场景。
父组件模板：
<child-a ref="compA"></child-a>
<child-b ref="compB"></child-b>组件 A 调用组件 B 方法：
this.$parent.$refs.compB.methodName();使用 provide/inject
适用于深层嵌套组件场景，祖先组件提供数据，后代组件注入使用。
祖先组件：
provide() {
return {
sharedData: this.sharedData
};
}兄弟组件：
inject: ['sharedData']注意事项
- 事件总线适合小型应用，需注意及时移除事件监听避免内存泄漏
- Vuex 适合中大型应用，提供更规范的状态管理
- 父子中转方式会增加组件耦合度
- $refs 方式破坏了组件封装性，慎用
- provide/inject 主要用于深层组件通信，非兄弟组件首选方案
选择方案时应根据项目规模、组件结构和维护需求综合考虑。小型项目可采用事件总线或父子中转，复杂项目推荐使用 Vuex。
