Vue组件传值五种方法全解析，父子、兄弟、跨级传值一网打尽

导读：本文将从实际开发经验出发，详细讲解 Vue 中组件通信的五种常见方式，包括 父子传值、兄弟传值 和 跨级传值，并结合个人项目实践进行说明，适合初学者和进阶开发者。

父子组件传值（props/$emit）

在 Vue 中，父子组件传值是最基础也是最常用的一种方式。父组件通过 props 向子组件传递数据，而子组件则通过 $emit 向父组件发送事件。

举个例子：假设我们有一个父组件 App.vue 和一个子组件 Child.vue，父组件想把用户的名字传给子组件显示出来。

// App.vue

子组件接收 name 并触发 update 事件：

// Child.vue

兄弟组件传值（EventBus）

当两个组件没有直接父子关系，但需要互相通信时，可以使用 EventBus 这种全局事件总线的方式。

首先，我们需要创建一个 Vue 实例作为事件中心：

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

然后，在组件 A 中发送事件：

// ComponentA.vue

在组件 B 中监听事件：

// ComponentB.vue

跨级组件传值（provide/inject）

对于嵌套层级较深的组件，如果每次都通过 props 一层层往下传，会非常麻烦。这时可以使用 provide/inject 来实现跨层级传值。

父组件通过 provide 提供数据，后代组件通过 inject 接收：

// Parent.vue

子组件或更深层的组件中注入：

// Grandchild.vue

Vuex 状态管理（适用于大型项目）

当项目结构复杂，组件间通信频繁且涉及多个层级时，建议使用 Vuex 进行状态管理。

Vuex 提供了一个集中式的 store，所有组件都可以访问其中的状态，并通过 commit 或 dispatch 修改状态。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  modules: {}
});

组件中使用：

// Counter.vue

自定义 Hook 函数（Composition API）

在 Vue 3 的 Composition API 中，我们可以封装一些通用逻辑为可复用的函数，类似于 React 的 Hook。

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

组件中使用：

// Counter.vue

总结：Vue 组件通信方式多样，选择合适的传值方式可以让代码更清晰、维护更方便。根据项目规模和组件关系灵活运用 props、EventBus、provide/inject、Vuex 及 Composition API，是提升开发效率的关键。