Vue2组件通信方式大全：8种方法助你打通组件间数据流

目录

一、Props / $emit（父子组件通信）

二、$refs（父子组件直接访问）

三、Event Bus（全局事件总线）

四、$parent / $children（父子实例访问）

五、Provide / Inject（依赖注入）

六、Vuex（状态管理）

七、$attrs / $listeners（跨代通信）

八、本地存储 & URL参数

总结对比表

---

一、Props / $emit（父子组件通信）

最常用的父子通信方式，遵循 单向数据流 原则。
适用场景：父传子数据、子触发父逻辑。

二、$refs（父子组件直接访问）

通过DOM引用直接调用子组件方法/数据
注意：过度使用会导致强耦合。

 

三、Event Bus（全局事件总线）

跨任意组件通信，小型项目替代Vuex的方案。
原理：创建一个空的Vue实例作为事件中心。

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

// 组件A（发送事件）
import { EventBus } from './eventBus.js';
EventBus.$emit('update-data', { key: 'value' });

// 组件B（接收事件）
import { EventBus } from './eventBus.js';
EventBus.$on('update-data', payload => {
  console.log("收到数据：", payload);
});

 

四、$parent / $children（父子实例访问）

直接访问父/子组件实例
警告：层级变化易导致代码脆弱，慎用！

// 子组件中
this.$parent.parentMethod(); // 调用父组件方法

// 父组件中
this.$children[0].childData; // 访问第一个子组件数据

 

五、Provide / Inject（依赖注入）

跨层级组件通信，祖先组件提供数据，后代注入使用。
注意：非响应式（需传入响应式对象解决）。

// 祖先组件
export default {
  provide() {
    return {
      appContext: this // 提供整个实例（响应式方案）
    }
  }
}

// 后代组件
export default {
  inject: ['appContext'],
  mounted() {
    console.log(this.appContext.globalData);
  }
}

 

六、Vuex（状态管理）

中大型项目终极解决方案，集中式状态管理。

 

// store.js
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state, payload) {
      state.count += payload;
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment', 5), 1000);
    }
  }
});

// 组件中使用
this.$store.commit('increment', 10); // 提交mutation
this.$store.dispatch('asyncIncrement'); // 触发action

七、$attrs / $listeners（跨代通信）

批量传递属性和事件，常用于高阶组件封装。

 

八、本地存储 & URL参数

非Vue原生但实用的通信方式

• localStorage/sessionStorage：持久化数据

• URL Query：通过路由传参

  // 存储数据
  localStorage.setItem('sharedData', JSON.stringify(data));
  
  // 获取数据
  const data = JSON.parse(localStorage.getItem('sharedData'));
  
  // 路由传参
  this.$router.push({ path: '/detail', query: { id: 123 } });

 

总结对比表

方式	通信方向	复杂度	适用场景
Props/$emit	父子组件	⭐	基础父子通信
$refs	父子组件	⭐⭐	父调子方法
Event Bus	任意组件	⭐⭐	小型项目跨组件通信
$parent/$children	父子组件	⭐⭐	紧急hack方案（不推荐）
Provide/Inject	跨层级	⭐⭐⭐	深层嵌套组件
Vuex	任意组件	⭐⭐⭐⭐	中大型项目状态管理
$attrs/$listeners	祖先-后代	⭐⭐⭐	高阶组件封装
本地存储/URL	任意页面	⭐⭐	页面间数据传递

 

最佳实践建议：
1️⃣ 优先使用Props/$emit满足基础需求
2️⃣ 跨组件通信选Event Bus或Vuex
3️⃣ 深层嵌套用Provide/Inject
4️⃣ 慎用直接访问实例（$refs/$parent）