Vue.js 2兄弟组件通信问题及父组件代码示例求助

从你的ParentComponent.vue结构来看，像<top-bar>、<breadcrumb>以及<router-view>渲染的组件都属于兄弟组件（它们共享同一个父组件ParentComponent）。下面是几种在Vue 2中处理这类组件通信的实用方案，你可以根据场景选择：

1. 父组件作为中间转发层（最简单直接的方案） #

这是最基础的方式，利用父组件作为兄弟组件之间的“桥梁”：

• 发送方组件通过$emit触发事件，把数据传递给父组件
• 父组件接收事件后，更新自身的数据或状态
• 接收方组件通过props从父组件获取更新后的状态

示例代码： #

比如假设<top-bar>需要通知<router-view>里的组件用户切换了语言：

ParentComponent.vue

<template>
  <div id="main-wrapper" class="appTravelytics">
    <top-bar v-if="$route.path !== '/login'" @language-changed="handleLanguageChange"></top-bar>
    <div class="page-wrapper" v-if="$route.path !== '/login'">
      <div class="container-fluid">
        <breadcrumb ></breadcrumb>
        <router-view :loggedIn="loggedIn" :currentLang="currentLang"></router-view>
      </div>
      <footer-bar></footer-bar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentLang: 'zh-CN'
    }
  },
  methods: {
    handleLanguageChange(newLang) {
      this.currentLang = newLang;
    }
  }
}
</script>

TopBar.vue

<template>
  <div>
    <button @click="changeLang('en-US')">切换英文</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLang(newLang) {
      this.$emit('language-changed', newLang);
    }
  }
}
</script>

RouterView里的子组件（比如Home.vue）

<template>
  <div>当前语言：{{ currentLang }}</div>
</template>

<script>
export default {
  props: ['currentLang']
}
</script>

2. 事件总线（Event Bus）（适合跨层级或简单的全局通信） #

如果兄弟组件层级较深，或者不想让父组件承担太多转发逻辑，可以创建一个全局的Vue实例作为事件总线：

步骤： #

1. 新建一个eventBus.js文件：

import Vue from 'vue';
export const EventBus = new Vue();

2. 在发送方组件中触发事件：
   比如<breadcrumb>要通知<footer-bar>更新版权信息：
   Breadcrumb.vue

<script>
import { EventBus } from './eventBus.js';

export default {
  methods: {
    updateCopyright(year) {
      EventBus.$emit('update-copyright', year);
    }
  }
}
</script>

3. 在接收方组件中监听事件：
   FooterBar.vue

<script>
import { EventBus } from './eventBus.js';

export default {
  data() {
    return {
      copyrightYear: '2024'
    }
  },
  mounted() {
    // 监听事件
    this.copyrightListener = EventBus.$on('update-copyright', (newYear) => {
      this.copyrightYear = newYear;
    });
  },
  beforeDestroy() {
    // 组件销毁时解绑事件，防止内存泄漏
    EventBus.$off('update-copyright', this.copyrightListener);
  }
}
</script>

3. Vuex（适合复杂的多组件状态共享） #

如果你的应用有大量跨组件的状态共享需求（比如用户登录状态、主题设置等），Vuex会是更合适的方案，它能统一管理全局状态：

简单示例： #

1. 定义Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    loggedIn: false
  },
  mutations: {
    SET_LOGIN_STATUS(state, status) {
      state.loggedIn = status;
    }
  },
  actions: {
    updateLoginStatus({ commit }, status) {
      commit('SET_LOGIN_STATUS', status);
    }
  },
  getters: {
    isLoggedIn: state => state.loggedIn
  }
});

2. 在发送方组件（比如登录后的组件）更新状态：

<script>
export default {
  methods: {
    handleLoginSuccess() {
      this.$store.dispatch('updateLoginStatus', true);
    }
  }
}
</script>

3. 在接收方组件（比如<top-bar>）获取状态：

<template>
  <div v-if="isLoggedIn">欢迎回来！</div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['isLoggedIn'])
  }
}
</script>

根据你的实际场景选择合适的方案：简单的父子/兄弟通信用父组件转发或事件总线，复杂的全局状态管理用Vuex。

内容的提问来源于stack exchange，提问作者sol