Vue组件通信的六种方式与各自适用场景

Vue 组件化开发的核心在于将复杂的页面拆解为独立的模块，而组件之间的数据传递（通信）则是连接这些模块的桥梁。掌握不同的通信方式，能够根据项目复杂度选择最合适的方案，从而提升开发效率和代码可维护性。

以下是 Vue 组件通信的六种核心方式及其详细操作步骤。

1. Props / $emit（父子组件通信） 这是 Vue 中最基础也是最常用的通信方式，适用于直接的父子关系。 **适用场景**：父组件向子组件传递数据，或子组件触发父组件的逻辑。 #### 父传子 1. 在父组件中，**定义**需要传递的数据变量。 2. 在父组件模板的子组件标签上，**使用** `v-bind` 或简写 `:` 将数据绑定上去。 3. 在子组件中，**定义** `props` 数组或对象来接收数据。 **代码示例**： ```javascript // 父组件 Parent.vue <template> <Child :message="parentMsg" /> </template> <script> export default { data() { return { parentMsg: '来自父组件的数据' } } } </script> // 子组件 Child.vue <script> export default { props: ['message'], // 接收数据 mounted() { console.log(this.message); // 输出：来自父组件的数据 } } </script> ``` #### 子传父 1. 在子组件中，**触发** `this.$emit('自定义事件名', 参数)` 来发送消息。

2. 在父组件模板的子组件标签上，监听该自定义事件。
3. 在父组件中，定义对应的方法处理接收到的参数。

代码示例：

// 子组件 Child.vue
<script>
export default {
  methods: {
    sendData() {
      this.$emit('update-msg', '子组件传回来的值');
    }
  }
}
</script>

// 父组件 Parent.vue
<template>
  <Child @update-msg="handleUpdate" />
</template>

<script>
export default {
  methods: {
    handleUpdate(val) {
      console.log(val); // 输出：子组件传回来的值
    }
  }
}
</script>
```

---

### 2. $children / $parent（父子组件直接访问）

这种方式允许组件直接访问父组件或子组件的实例，从而直接调用其方法或访问数据。

**适用场景**：需要直接操作父子组件实例的简单逻辑，但不推荐在复杂项目中滥用，因为它增加了组件耦合度。

#### 子访问父

1.  在子组件内部，**访问** `this.$parent` 属性。
2.  **直接读取**父组件的 `data` 或 **调用**父组件的 `methods`。

#### 父访问子

1.  在父组件内部，**访问** `this.$children` 属性。
2.  **遍历**数组（它是一个数组，因为可能有多个子组件），找到目标子组件实例并操作。

**代码示例**：

```javascript
// 子组件访问父组件
// Child.vue
export default {
  mounted() {
    // 调用父组件的 doSomething 方法
    this.$parent.doSomething();
  }
}

3. Ref（父子组件引用）

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs` 对象上。 **适用场景**：父组件需要在某个时刻主动调用子组件的方法（如打开弹窗、重置表单）。 1. 在父组件的模板中，**给**子组件标签**添加** `ref="自定义名称"` 属性。 2. 在父组件的逻辑代码中（如 `mounted` 或方法中），**通过** `this.$refs.自定义名称 获取子组件实例。
3. 调用子组件的方法或属性。

代码示例：

// 父组件 Parent.vue
<template>
  <Child ref="childComp" />
  <button @click="handleClick">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 直接调用子组件的 childMethod 方法
      this.$refs.childComp.childMethod();
    }
  }
}
</script>

// 子组件 Child.vue
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用了');
    }
  }
}
</script>
```

---

### 4. EventBus（事件总线 / 兄弟组件通信）

EventBus 本质上是一个空的 Vue 实例，它充当了一个中枢，利用 `$emit` 触发事件和 `$on` 监听事件来实现任意两个组件间的通信。

**适用场景**：兄弟组件通信，或跨级组件通信（但在 Vue 3 中已移除 `$on` 等实例方法，Vue 3 推荐使用 Mitt 等第三方库）。

#### 初始化

1.  **创建**一个新的 js 文件（如 `event-bus.js`）。
2.  **导出**一个 Vue 实例。

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

发送事件

1. 在组件 A 中，引入 EventBus。
2. 在需要发送消息的地方，调用 EventBus.$emit('事件名', 数据)`。 #### 接收事件 1. 在组件 B 中，**引入** EventBus。 2. 在生命周期（如 `created` 或 `mounted`）中，**调用** `EventBus.$on('事件名', 回调函数) 接收数据。
3. 务必在组件销毁时（beforeDestroy）调用 `EventBus.$off('事件名')` **解绑**事件，防止内存泄漏。 **代码示例**： ```javascript // 组件 A（发送方） import { EventBus } from './event-bus.js'; EventBus.$emit('msg-from-a', '你好，组件B');

// 组件 B（接收方）
import { EventBus } from './event-bus.js';
export default {
created() {
EventBus.$on('msg-from-a', (payload) => { console.log(payload); // 输出：你好，组件B }); }, beforeDestroy() { EventBus.$off('msg-from-a');
}
}

---

### 5. Vuex / Pinia（状态管理模式）

这是 Vue 官方推荐的集中式状态管理工具，将所有组件的共享状态抽取出来，以一个全局单例模式管理。

**适用场景**：中大型项目，多个组件共享状态（如用户信息、购物车数据），或组件间关系极其复杂。

#### 使用 Vuex / Pinia 的一般流程

1.  **定义** State（状态）、Getters（计算属性）、Mutations（同步修改状态）、Actions（异步操作）。
2.  在组件中，**使用** `mapState`、`mapGetters` 辅助函数**获取**状态。
3.  在组件中，**使用** `mapMutations`、`mapActions` 辅助函数**提交**修改。

**代码示例（以 Pinia 为例，Vue 3 推荐）**：

```javascript
// store/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

// 组件中使用
import { useCounterStore } from '@/stores/counter';
export default {
  setup() {
    const store = useCounterStore();

    // 读取
    console.log(store.count); 

    // 修改
    store.increment();
  }
}

6. Provide / Inject（依赖注入）

这对选项允许一个祖先组件向其所有后代组件注入一个依赖，无论组件层次有多深，并在起上下游关系成立的时间里始终生效。

适用场景：跨级组件通信（如“高阶组件”或深层次嵌套），特别是当你不想通过一层层 props 传递时。

祖先组件

1. 在祖先组件中，配置 provide 选项。
2. 返回一个对象，包含要提供给后代的数据或方法。

后代组件

1. 在后代组件中，配置 inject 选项。
2. 定义一个数组，包含要接收的数据 key 值，或者使用对象形式的默认值配置。

代码示例：

// 祖先组件 Root.vue
export default {
  data() {
    return {
      theme: 'dark'
    }
  },
  provide() {
    return {
      theme: this.theme // 提供响应式数据需注意写法，这里为基础示例
    }
  }
}

// 深层后代组件 DeepChild.vue
export default {
  inject: ['theme'],
  mounted() {
    console.log(this.theme); // 输出：dark
  }
}

总结与对比

为了快速选择合适的通信方式，请参考下表：