实现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);