实现vue兄弟组件通信
使用事件总线（Event Bus）
创建一个全局的事件总线实例，通过$emit和$on实现组件间通信。
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();在发送组件中触发事件：
import { EventBus } from './eventBus.js';
EventBus.$emit('eventName', data);在接收组件中监听事件：
import { EventBus } from './eventBus.js';
EventBus.$on('eventName', (data) => {
console.log(data);
});通过父组件作为桥梁
父组件通过props接收子组件A的数据，再通过v-on将数据传递给子组件B。
子组件A发送数据：
this.$emit('updateData', data);父组件模板：
<child-a @updateData="handleData"></child-a>
<child-b :data="sharedData"></child-b>父组件逻辑：
data() {
return { sharedData: null };
},
methods: {
handleData(data) {
this.sharedData = data;
}
}使用Vuex状态管理
适用于复杂场景，通过集中式存储管理组件间的共享状态。
定义Vuex store：
// 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', data);组件B获取数据：
computed: {
sharedData() {
return this.$store.state.sharedData;
}
}使用$refs直接访问
通过父组件的$refs直接调用子组件方法（不推荐，破坏组件封装性）。
父组件模板：
<child-a ref="childA"></child-a>
<child-b ref="childB"></child-b>父组件逻辑：
this.$refs.childB.methodName(this.$refs.childA.data);
