Vue 组件通信方式深度解析

核心思想：本笔记旨在梳理 Vue 组件间的所有通信方式，区分父子组件通信与跨组件通信，并详细解释每种方式的原理、用法及适用场景。内容源于就业阶段的补充课程，部分知识点平时开发不常用，但属于面试高频题，需重点理解。

一、父子组件通信

Vue 自身提供的通信方式绝大部分都集中在父子组件层面。其核心设计理念是单向数据流：数据从父组件流向子组件，子组件通过事件通知父组件进行数据变更。

1. `props` / `$emit`

props: 父传子。父组件通过属性将数据传递给子组件。这是最常用、最基础的通信方式。
$emit (event): 子传父。子组件通过触发一个自定义事件并携带参数，通知父组件发生了某件事，由父组件来处理后续逻辑（如修改数据）。

2. 样式传递 (`style` & `class`)

作用：父组件可以直接向子组件的根元素传递和合并 style 和 class。

机制：当在父组件的子组件标签上定义 style 或 class 时，即使子组件没有通过 props 声明接收它们，Vue 也会自动将这些样式应用到子组件的根元素上。如果根元素本身已有 style 或 class，则会进行合并。

示例：

父组件 (Parent.vue):

vue

<template>
  <ChildComponent
    class="parent-class"
    :style="{ color: 'red' }"
  />
</template>

子组件 (ChildComponent.vue):

vue

<template>
  <div class="child-class" :style="{ fontSize: '16px' }">
    </div>
</template>

最终渲染的 HTML:

html

<div class="child-class parent-class" style="font-size: 16px; color: red;">
  </div>

3. 非 Prop 的 Attribute (`$attrs`)

作用：用于传递除了 props 中已声明的、以及 style 和 class 之外的所有属性。

默认行为：和 style、class 类似，所有未被 props 接收的属性（称为 attributes）会自动“透传”并附加到子组件的根元素上。
在子组件中访问：子组件内部可以通过 $attrs 这个特殊属性（一个对象）访问到所有父组件传递过来的非 prop 属性。
禁用默认行为：如果不想让这些属性自动附加到根元素，可以在子组件中设置 inheritAttrs: false。这不影响通过 $attrs 访问它们。

示例：

父组件 (Parent.vue):

vue

<template>
  <ChildComponent message="hello" data-a="1" data-b="2" />
</template>

子组件 (ChildComponent.vue):

javascript

export default {
  props: ['message'], // 只接收 message
  inheritAttrs: false, // (可选)禁用自动附加到根元素
  created() {
    // { "data-a": "1", "data-b": "2" }
    console.log(this.$attrs);
  }
}

渲染结果 (如果 inheritAttrs 未设置或为 true):
html
```
<div data-a="1" data-b="2">...</div>
```

4. `v-model`

作用：实现父子组件之间的双向数据绑定，本质上是一个语法糖。

原理：v-model 在一个组件上等价于传递一个 value prop 并监听一个 input 事件。

vue

<CustomInput v-model="searchText" />
<CustomInput :value="searchText" @input="searchText = $event" />

限制：一个组件上只能使用一次 v-model。
面试重点：常考其原理，将在后续课程中深入讲解。

5. `.sync` 修饰符

作用：同样用于实现父子组件间的双向数据绑定，是 v-model 的补充，可以实现多个数据的双向绑定。

历史原因：Vue 早期设计中，v-model 只能绑定一个值，.sync 的出现解决了需要同步多个 prop 的问题。

原理：也是一个语法糖，等价于传递一个 prop 并监听一个名为 update:propName 的事件。

vue

<NumberEditor :num1.sync="n1" :num2.sync="n2" />
<NumberEditor
  :num1="n1" @update:num1="n1 = $event"
  :num2="n2" @update:num2="n2 = $event"
/>

子组件实现：子组件需要 this.$emit('update:propName', newValue) 来通知父组件更新。
Vue 3 更新：在 Vue 3 中，.sync 修饰符已被移除，其功能完全整合进了 v-model，可以通过 v-model:propName 的形式为一个组件绑定多个 v-model。

6. `.native` 修饰符

作用：将一个原生 DOM 事件监听器绑定到子组件的根元素上。

场景：当你希望监听一个子组件根元素的原生事件（如 click, focus），而不是子组件自己 emit 的事件时使用。
示例：
vue
```
<ChildComponent @click.native="handleNativeClick" />
```
这样点击子组件的根 div 时就会触发 handleNativeClick 方法，而不需要子组件内部做任何 emit 操作。

7. `$parent` / `$children`

作用：在组件内部直接访问其父组件实例或子组件实例数组。

this.$parent: 访问父组件实例。
this.$children: 访问一个包含所有直接子组件实例的数组。
警告：强烈不推荐使用。这种方式会使父子组件高度耦合，组件的结构一旦变化，代码就可能出错，难以维护。仅作为了解即可。

8. `ref`

作用：在父组件中获取对子组件实例的直接引用。

用法：
1. 在父组件的子组件标签上添加 ref="someName"。
2. 在父组件中通过 this.$refs.someName 即可访问该子组件的实例，从而可以调用子组件的方法或访问其数据。
与 $children 的区别：ref 提供了具名的、更可控的访问方式，而 $children 是无序的，依赖于渲染顺序。

9. `$slots` / `$scopedSlots` (插槽)

作用：插槽是内容分发的一种方式，也属于父子通信的一种，允许父组件向子组件的特定区域插入内容。

将在后续章节专门讲解。

二、跨组件通信

当组件关系不是直接的父子，如兄弟、祖孙或完全不相关的组件时，需要采用以下方式。这些方式大多依赖一个第三方（或称中间层）来进行通信。

1. `provide` / `inject`

作用：实现祖先与后代之间的通信，可以跨越任意层级的组件。

provide (提供)：由祖先组件通过 provide 选项提供一个或多个数据/方法。
inject (注入)：任何后代组件都可以通过 inject 选项声明需要注入的数据，并直接在组件实例上使用。
优点：解决了深层组件嵌套时，props 需要层层传递的“prop drilling”问题。
缺点：组件间的耦合变得不明显，数据来源不易追踪。适用于开发组件库。

示例：

祖先组件 (Ancestor.vue):

javascript

export default {
  provide: {
    theme: 'dark'
  }
}

后代组件 (Descendant.vue):

javascript

export default {
  inject: ['theme'],
  created() {
    console.log(this.theme); // "dark"
  }
}

2. 事件总线 (`Event Bus`)

作用：通过一个中央事件总线（通常是一个新的、空的 Vue 实例），实现任意组件间的通信。

原理：利用观察者模式。
1. 创建总线: const bus = new Vue();
2. 监听事件: 组件 A 通过 bus.$on('eventName', callback) 监听事件。
3. 触发事件: 组件 B 通过 bus.$emit('eventName', data) 触发事件。
4. 销毁监听: 在组件销毁前（beforeDestroy 钩子），务必用 bus.$off('eventName', callback) 移除监听，防止内存泄漏。
缺点：类似于全局变量，数据流向不明确，项目复杂时难以调试和维护。

3. Vuex

作用：Vue 官方的、专门为大型应用设计的集中式状态管理方案。

核心：创建一个全局唯一的“仓库”（Store），包含应用中大部分的状态（State）。
特点：
- State: 驱动应用的唯一数据源。
- Mutations: 同步更改 State 的唯一方法，便于追踪。
- Actions: 处理异步操作，最终通过提交 (commit) mutation 来改变状态。
- Getters: 类似于计算属性，用于派生出一些状态。
优点：数据流清晰、可预测，配合 Vue Devtools 可以实现时间旅行等高级调试功能。
缺点：对于中小型项目来说，引入 Vuex 会增加代码的复杂度和冗余度。

4. 轻量级 Store 模式

作用：作为 Vuex 的一种极简替代方案，适用于中小型项目的数据共享。

原理：
1. 创建一个普通的 JavaScript 对象（Store），并将其 export。
2. 在需要共享数据的组件中 import 这个 Store 对象。
3. 将这个 Store 对象放入组件的 data 选项中。Vue 会自动将其转换为响应式数据。
优点：实现简单、轻量，无需额外库。
缺点：无法跟踪数据变化。任何组件都可以随意修改 Store 中的数据，当应用变复杂时，数据状态变得不可控，出现问题时难以定位。

示例：

store.js:

javascript

export const store = {
  user: { name: 'Guest' }
};

ComponentA.vue:

javascript

import { store } from './store.js';
export default {
  data() {
    return {
      sharedState: store
    };
  }
}

5. Vue Router

作用：通过URL作为媒介，实现组件间的间接通信。

原理：
- 一个组件（如分页组件）改变 URL（通过 <router-link> 或编程式导航 this.$router.push)。
- 另一个组件（如列表组件）监听 URL 的变化（通过 watch $route 对象或 <router-view> 的更新），并根据新的 URL 参数获取数据、重新渲染。
这是一种非常常见且解耦的跨组件通信模式，尤其适用于页面级的组件通信。

Vue 组件通信方式深度解析 ​

一、 父子组件通信 ​

1. props / $emit ​

2. 样式传递 (style & class) ​

3. 非 Prop 的 Attribute ($attrs) ​

4. v-model ​

5. .sync 修饰符 ​

6. .native 修饰符 ​

7. $parent / $children ​

8. ref ​

9. $slots / $scopedSlots (插槽) ​

二、 跨组件通信 ​

1. provide / inject ​

2. 事件总线 (Event Bus) ​

3. Vuex ​

4. 轻量级 Store 模式 ​

5. Vue Router ​

Vue 组件通信方式深度解析

一、父子组件通信

1. `props` / `$emit`

2. 样式传递 (`style` & `class`)

3. 非 Prop 的 Attribute (`$attrs`)

4. `v-model`

5. `.sync` 修饰符

6. `.native` 修饰符

7. `$parent` / `$children`

8. `ref`

9. `$slots` / `$scopedSlots` (插槽)

二、跨组件通信

1. `provide` / `inject`

2. 事件总线 (`Event Bus`)

3. Vuex

4. 轻量级 Store 模式

5. Vue Router