Vue.js中兄弟组件三种方式父组件弟弟组件获取状态弟弟组件通过store获取共享状态

作者：机器人技术佬 | 发布时间：2025-07-08 |

Vue.js中兄弟组件通信的三种方式

一、使用父组件作为中介

这种方法就像在两个兄弟之间拉一根绳子，绳子的一头连接着哥哥，另一头连接着弟弟。哥哥和弟弟通过这根绳子传递信息和事件。

步骤：

哥哥组件触发事件：哥哥组件使用方法向爸爸（父组件）传递信息和事件。
爸爸接收事件并传递信息：爸爸接收信息后，通过props将信息传递给弟弟组件。

```javascript // 兄弟组件1 methods: { sendInfoToParent() { this.$emit('info', { message: '你好，弟弟！' }); } }, // 父组件 props: ['info'], // 在模板中使用 ```

二、使用事件总线

事件总线就像一个公共的大喇叭，任何组件都可以喊话（触发事件），其他组件也可以听到（监听事件）。

步骤：

创建事件总线：在一个单独的文件中创建一个Vue实例作为事件总线。
哥哥组件触发事件：哥哥组件通过事件总线触发事件并传递信息。
弟弟组件监听事件：弟弟组件通过事件总线监听事件并获取信息。

```javascript // 事件总线.js import Vue from 'vue'; export const EventBus = new Vue(); // 兄弟组件1 methods: { sendInfo() { EventBus.$emit('info', { message: '你好，弟弟！' }); } }, // 兄弟组件2 mounted() { EventBus.$on('info', (data) => { console.log(data.message); }); }, ```

三、使用Vuex进行状态管理

Vuex就像是家里的总管家，负责管理所有的财产（状态），每个家庭成员（组件）都可以通过总管家来管理和获取财产。

步骤：

安装Vuex：通过npm或yarn安装Vuex。
创建Vuex store：在一个独立的文件中配置Vuex store，并定义state、mutations和actions。
哥哥组件提交状态变更：哥哥组件通过store提交状态变更。
弟弟组件获取状态：弟弟组件通过store获取共享状态。

```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: '你好，弟弟！' }, mutations: { changeMessage(state, newMessage) { state.message = newMessage; } }, actions: { updateMessage({ commit }, newMessage) { commit('changeMessage', newMessage); } } }); // 兄弟组件1 methods: { updateMessage() { this.$store.dispatch('updateMessage', '我改变了！'); } }, // 兄弟组件2 computed: { message() { return this.$store.state.message; } }, ```

在Vue.js中，兄弟组件之间的通信主要可以通过三种方式实现：使用父组件作为中介、使用事件总线和使用Vuex进行状态管理。选择哪种方法取决于应用的复杂程度和具体需求。对于简单的场景，使用父组件作为中介是最直接的方法。对于需要跨组件通信的情况，事件总线是一种灵活的选择。而对于大型应用，Vuex提供了集中式的状态管理，确保数据的一致性和可维护性。