vue实现兄弟组件通信
使用事件总线（Event Bus）
创建一个空的 Vue 实例作为事件总线，用于在兄弟组件之间传递事件和数据。
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();在发送组件中触发事件：
// ComponentA.vue
import { EventBus } from './eventBus.js';
methods: {
sendMessage() {
EventBus.$emit('message', this.message);
}
}在接收组件中监听事件：
// ComponentB.vue
import { EventBus } from './eventBus.js';
created() {
EventBus.$on('message', (message) => {
console.log(message);
});
}使用 Vuex 状态管理
Vuex 是 Vue 的官方状态管理库，适合大型应用中的组件通信。
定义 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;
}
}
});在发送组件中提交 mutation：
// ComponentA.vue
methods: {
updateSharedData() {
this.$store.commit('updateData', this.message);
}
}在接收组件中获取 state：
// ComponentB.vue
computed: {
sharedData() {
return this.$store.state.sharedData;
}
}使用父组件作为中介
通过父组件作为中介，使用 props 和自定义事件实现兄弟组件通信。
父组件模板：
<!-- Parent.vue -->
<template>
<child-a @send="handleSend" />
<child-b :message="message" />
</template>父组件逻辑：
// Parent.vue
data() {
return {
message: null
};
},
methods: {
handleSend(message) {
this.message = message;
}
}发送组件触发事件：
// ChildA.vue
methods: {
sendMessage() {
this.$emit('send', this.message);
}
}接收组件通过 props 获取数据：
// ChildB.vue
props: ['message']使用 provide/inject
适用于深层嵌套组件，但不推荐用于兄弟组件通信。
父组件提供数据：
// Parent.vue
provide() {
return {
sharedData: this.sharedData
};
},
data() {
return {
sharedData: null
};
},
methods: {
updateSharedData(data) {
this.sharedData = data;
}
}子组件注入数据：
// ChildB.vue
inject: ['sharedData']使用 $parent 和 $children
直接访问父组件和子组件实例，但不推荐使用，因为会破坏组件封装性。
发送组件：
// ComponentA.vue
methods: {
sendMessage() {
this.$parent.message = this.message;
}
}接收组件：
// ComponentB.vue
computed: {
message() {
return this.$parent.message;
}
}
