Vue组件通信全攻略：多层嵌套轻松搞定

在 Vue 开发中，组件通信是必不可少的技能。特别是当组件层级较深时，如何高效地传递数据和事件，直接影响项目的代码质量与可维护性。本文总结了 Vue 常见的组件传值与通信方案，覆盖从父子到跨层、任意组件间通信的主流方法。

1. 父子组件通信：props + $emit

适用场景：标准父子关系

父组件通过 props 向子组件传递数据，子组件通过 $emit 向父组件发送事件通知。

<!-- 父组件 -->
<template>
  <Child :money="100" @say-thanks="handleThanks" />
</template>
<script>
export default {
  methods: {
    handleThanks(msg) {
      console.log(msg); // "我收到100块啦！"
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="thankParent">点我收钱</button>
</template>
<script>
export default {
  props: ['money'],
  methods: {
    thankParent() {
      this.$emit('say-thanks', `我收到${this.money}块啦！`);
    }
  }
}
</script>

特点：

• 简单直观；
• 层级嵌套过深时容易形成“传值地狱”。

2. 属性透传：$attrs 与 $listeners

适用场景：跳过中间组件的透明传递

通过 $attrs 可将父组件未声明的属性透传给子组件；通过 $listeners 透传事件监听。

<!-- 爷爷组件 -->
<Grandpa>
  <Dad :secret-money="200" />
</Grandpa>

<!-- 爸爸组件 -->
<template>
  <Son v-bind="$attrs" />
</template>

<!-- 孙子组件 -->
<script>
export default {
  props: ['secretMoney'],
  created() {
    console.log(this.secretMoney); // 200
  }
}
</script>

特点：

• 适合简单跨层传递；
• 仅限未被中间组件声明的属性。

3. 跨层注入：provide 与 inject

适用场景：跨层级长链传递

祖先组件通过 provide 提供数据，后代组件通过 inject 直接获取。

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      familyWeapon: '屠龙宝刀'
    };
  }
}
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['familyWeapon'],
  created() {
    console.log(this.familyWeapon); // "屠龙宝刀"
  }
}
</script>

特点：

• 轻松跨层传值；
• 数据来源隐蔽，需注意维护清晰的依赖关系。

4. 任意组件通信：事件总线（Event Bus）

适用场景：非父子关系组件互通

通过全局事件总线，实现任意组件之间的通信。

// event-bus.js
import Vue from 'vue';
export const eventBus = new Vue();

// 发送事件
eventBus.$emit('send-msg', '今晚开黑吗？');

// 接收事件
eventBus.$on('send-msg', msg => {
  console.log(`收到消息：${msg}`);
});

特点：

• 快速灵活；
• 项目复杂时容易造成事件混乱；
• 组件销毁时需手动移除监听。

5. 状态集中管理：Vuex

适用场景：中大型项目全局状态管理

使用 Vuex 统一管理应用状态，组件通过 state 和 mutations 读写数据。

// store.js
export default new Vuex.Store({
  state: { familySavings: 10000 },
  mutations: {
    withdraw(state, amount) {
      state.familySavings -= amount;
    }
  }
});

<script>
export default {
  computed: {
    savings() {
      return this.$store.state.familySavings;
    }
  },
  methods: {
    takeMoney() {
      this.$store.commit('withdraw', 500);
      console.log(`取了500，余额${this.savings}`);
    }
  }
}
</script>

特点：

• 适合复杂应用；
• 学习成本较高，小项目可能不必要。

总结对比

以上就是 Vue 组件通信的完整方案汇总。在实际项目中，灵活搭配使用这些通信方式，才能让你的组件结构既清晰又高效。