vue 组件之间相互传值的6种方法

Vue.js 中组件间通信的方法有很多种，以下是6种常见的直接或间接的组件传值方式：

1. Props（父向子）

• 优点：
  • 易于理解，符合单向数据流的原则，有利于代码维护。
• 缺点：
  • 数据只能从父组件传递到子组件，不能反向传递。如果需要多个层级传递，则需要逐层向下传递props。
  • 当应用规模扩大时，过度依赖props可能导致组件间耦合度提高。

2. 自定义事件（子向父）

• 优点：
  • 实现了数据从子组件向父组件的传递，遵循响应式设计原则。
• 缺点：
  • 只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。
  • 如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。

3. $refs 和直接调用方法

• 优点：
  • 在需要对子组件进行操作或获取其内部状态时非常方便。
• 缺点：
  • 违背了组件的封装原则，使父组件对子组件内部实现细节有过多了解和依赖。
  • 不适用于跨层级、非父子关系的组件间通信。

4. Vuex

• 优点：
  • 提供了一个中心化的状态管理机制，便于多个组件共享和管理状态。
  • 支持异步操作，适合大型项目，可以有效降低组件间的耦合度。
• 缺点：
  • 对小型项目来说，引入Vuex可能过于复杂，增加了项目的开发和学习成本。
  • 需要编写额外的store模块和actions/mutations/getters，增加了一定的代码量。

5. Event Bus（全局事件总线）

• 优点：
  • 简化任意组件间的通信，尤其适合不具有直接关联关系的组件之间进行消息传递。
• 缺点：
  • 全局事件容易造成命名冲突，需要谨慎管理事件名称。
  • 当项目较大时，难以追踪事件的来源和去向，维护起来较困难。
  • 随着项目复杂度提升，过度依赖Event Bus会导致整体架构混乱，不易于调试和维护。

6. provide/inject

• 优点：
  • 可以方便地在祖先组件中提供数据给任意后代组件，无需逐层传递props。
• 缺点：
  • 注入的数据不具备响应性（除非注入的是计算属性或者Vue实例的方法）。
  • 容易造成组件间隐式的强耦合，不利于组件独立性和可复用性。

详细代码示例

1. Props（父向子）

父组件向子组件传递数据：

• 父组件代码：

• 子组件代码：

2. 自定义事件（子向父）

子组件向父组件传递数据：

• 子组件代码：

• 父组件代码：

3. $refs 和直接调用方法

在某些情况下，可以通过 ref 获取到子组件实例并在父组件中直接调用其方法。

• 子组件代码：

• 父组件代码：

4. Vuex

使用全局状态管理工具 Vuex 来实现跨多个层级组件间的通信。

• 在 Vuex 中创建 store：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, data) {
      state.sharedData = data;
    }
  },
  actions: {
    updateSharedData({ commit }, newData) {
      commit('setSharedData', newData);
    }
  },
  getters: {
    getSharedData(state) {
      return state.sharedData;
    }
  }
});

• 组件内使用：

// 任何组件内

5. Event Bus（全局事件总线）

创建一个全局事件总线来允许任意组件之间进行通信。

// eventBus.js
import Vue from 'vue';

export const EventBus = new Vue();

• 发送事件的组件：

• 接收事件的组件：

6. provide/inject

Vue 提供了 provide 和 inject API 来实现祖先组件向后代组件提供依赖的方式（无需中间传递）。

• 祖先组件提供数据：

• 后代组件注入数据：

以上每种方法都有其适用场景和优缺点，请根据实际项目需求选择合适的方式。