多种通信方式及原理

在 Vue 中，组件通信是构建复杂应用的核心能力。不同组件关系（父子、兄弟、跨层级等）需要不同的通信方式，每种方式都有其原理和适用场景。以下是 Vue 中常用的组件通信方式及原理详解：

一、父子组件通信

父子组件是最常见的关系，通信方式主要依赖 props 向下传递 和 自定义事件向上传递，遵循“单向数据流”原则。

1. 父 → 子：Props

原理：父组件通过在子组件标签上绑定属性，子组件通过 props 选项声明接收，Vue 内部会将这些属性注入子组件的实例中，实现数据传递。

特点：

• 单向数据流：父组件数据更新会自动同步到子组件，但子组件不能直接修改 props（需通过事件通知父组件修改）。
• 支持类型验证、默认值、自定义校验等。

示例：

<!-- 父组件 Parent.vue -->
<template>
  <Child 
    :message="parentMsg" 
    :user="userInfo" 
    :is-visible="showChild"
  />
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  data() {
    return {
      parentMsg: '来自父组件的消息',
      userInfo: { name: 'John', age: 30 },
      showChild: true
    };
  }
};
</script>

<!-- 子组件 Child.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ user.name }} - {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  // 声明接收的 props（支持多种写法）
  props: {
    // 基础类型检查
    message: String,
    // 复杂类型 + 默认值 + 校验
    user: {
      type: Object,
      default: () => ({ name: 'Guest', age: 0 }), // 对象默认值需用函数返回
      validator: (value) => value.age >= 0 // 自定义校验：年龄不能为负
    },
    // 布尔值（可省略属性值，仅写属性名表示 true）
    isVisible: Boolean
  },
  mounted() {
    console.log(this.message); // 访问 props
  }
};
</script>

2. 子 → 父：自定义事件（$emit）

原理：子组件通过 this.$emit(eventName, data) 触发自定义事件，父组件在子组件标签上通过 v-on:eventName 监听事件并接收数据，本质是“事件派发-监听”机制。

特点：

• 支持传递任意类型数据（基础类型、对象、函数等）。
• 可通过 .sync 修饰符或 v-model 简化双向绑定逻辑。

示例：

<!-- 子组件 Child.vue -->
<template>
  <button @click="handleClick">向父组件发送数据</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发自定义事件，传递数据
      this.$emit('send-data', { id: 1, content: '子组件数据' });
      
      // 触发带多个参数的事件
      this.$emit('update-count', 10, 'increment');
    }
  }
};
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child 
    @send-data="handleReceive" 
    @update-count="handleCountUpdate"
  />
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  methods: {
    handleReceive(data) {
      console.log('接收子组件数据：', data); // { id: 1, content: '子组件数据' }
    },
    handleCountUpdate(value, type) {
      console.log('更新数量：', value, type); // 10, 'increment'
    }
  }
};
</script>

扩展：.sync 修饰符
简化“子组件修改父组件数据”的逻辑（语法糖）：

<!-- 父组件 -->
<Child :count.sync="parentCount" />
<!-- 等价于 -->
<Child :count="parentCount" @update:count="parentCount = $event" />

<!-- 子组件 -->
this.$emit('update:count', newCount); // 触发更新

3. 父 → 子：ref / $refs

原理：父组件通过 ref 属性给子组件命名，再通过 this.$refs.refName 获取子组件实例，直接访问子组件的属性或方法。

特点：

• 适用于需要直接操作子组件（如调用方法）的场景。
• 依赖组件实例，耦合性较高，建议优先使用 props + 事件。

示例：

<!-- 父组件 -->
<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  methods: {
    callChildMethod() {
      // 获取子组件实例
      const child = this.$refs.childRef;
      // 访问子组件属性
      console.log(child.childMsg);
      // 调用子组件方法
      child.childMethod('来自父组件的调用');
    }
  }
};
</script>

<!-- 子组件 Child.vue -->
<script>
export default {
  data() {
    return { childMsg: '子组件消息' };
  },
  methods: {
    childMethod(msg) {
      console.log('收到调用：', msg);
    }
  }
};
</script>

二、兄弟组件通信

兄弟组件指同一父组件下的子组件，通信需通过“中间层”（父组件或全局事件总线）。

1. 父组件中转

原理：以父组件为中间桥梁，兄组件通过自定义事件将数据传递给父组件，父组件再通过 props 将数据传递给弟组件。

适用场景：兄弟组件关系简单，且不希望引入复杂工具。

示例：

<!-- 父组件 Parent.vue -->
<template>
  <BrotherA @send-to-brother="handleDataFromA" />
  <BrotherB :data-from-a="dataFromA" />
</template>

<script>
import BrotherA from './BrotherA.vue';
import BrotherB from './BrotherB.vue';
export default {
  components: { BrotherA, BrotherB },
  data() {
    return { dataFromA: null };
  },
  methods: {
    handleDataFromA(data) {
      this.dataFromA = data; // 接收 A 的数据，传递给 B
    }
  }
};
</script>

2. 事件总线（EventBus）

原理：创建一个全局的 Vue 实例作为事件总线，组件通过总线的 $on 监听事件，$emit 触发事件，实现跨组件通信。

适用场景：中小型应用，组件关系较复杂但未引入状态管理库。

示例：

// eventBus.js - 创建全局事件总线
import Vue from 'vue';
export default new Vue(); // Vue 实例可作为事件总线（基于其事件系统）

<!-- 组件 A（发送方） -->
<script>
import eventBus from './eventBus';
export default {
  methods: {
    sendData() {
      // 通过总线触发事件
      eventBus.$emit('brother-event', '来自组件 A 的数据');
    }
  }
};
</script>

<!-- 组件 B（接收方） -->
<script>
import eventBus from './eventBus';
export default {
  mounted() {
    // 监听总线事件
    this.busListener = eventBus.$on('brother-event', (data) => {
      console.log('组件 B 接收数据：', data);
    });
  },
  beforeDestroy() {
    // 销毁时移除监听，避免内存泄漏
    eventBus.$off('brother-event', this.busListener);
  }
};
</script>

注意：Vue 3 中移除了 $on/$off 等实例方法，需用第三方库（如 mitt）替代事件总线。

三、跨层级组件通信（祖孙/深层级）

跨层级组件指非直接父子关系的组件（如祖父与孙子、深层嵌套组件），常用 Provide/Inject 或状态管理库。

1. Provide / Inject

原理：父组件通过 provide 提供数据，任意深层子组件通过 inject 注入数据，Vue 内部会在组件树中向上查找对应的 provide，实现跨层级传递。

特点：

• 无视组件层级，直接传递数据。
• 适用于深层级通信，但不推荐过度使用（可能导致数据来源不清晰）。

Vue 2 示例：

<!-- 祖父组件 Grandparent.vue -->
<script>
export default {
  provide() {
    return {
      theme: 'dark', // 提供静态数据
      user: this.currentUser // 提供响应式数据（依赖当前实例）
    };
  },
  data() {
    return { currentUser: { name: 'John' } };
  }
};
</script>

<!-- 孙子组件 Grandchild.vue -->
<script>
export default {
  inject: ['theme', 'user'], // 注入数据
  mounted() {
    console.log(this.theme); // 'dark'
    console.log(this.user.name); // 'John'
  }
};
</script>

Vue 3 组合式 API 示例：

<!-- 祖父组件 -->
<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
// 提供响应式数据
provide('theme', theme);
</script>

<!-- 孙子组件 -->
<script setup>
import { inject } from 'vue';
// 注入数据（保持响应性）
const theme = inject('theme');
console.log(theme.value); // 'dark'
</script>

2. 状态管理库（Vuex / Pinia）

原理：通过一个全局的“状态仓库”存储数据，所有组件均可直接访问或修改仓库中的数据，仓库内部通过“单向数据流”管理状态变化（Vuex 的 Action → Mutation → State；Pinia 简化为 Action → State）。

适用场景：大型应用，多组件共享复杂状态（如用户信息、购物车、全局设置等）。

Pinia 示例（Vue 3 推荐）：

// store/counter.js - 创建仓库
import { defineStore } from 'pinia';

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

<!-- 组件 A（修改状态） -->
<script setup>
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore();
counterStore.increment(); // 调用 action 修改状态
</script>

<!-- 组件 B（读取状态） -->
<template>
  <p>{{ counterStore.count }}</p>
</template>

<script setup>
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore(); // 访问全局状态
</script>

四、其他通信方式

1. $parent / $children（不推荐）

原理：通过组件实例的 $parent 访问父组件，$children 访问子组件列表，直接操作上下游组件。

问题：

• 强耦合组件结构，若组件层级变化（如增加中间层），代码会失效。
• $children 是无序数组，访问特定子组件困难。

示例：

// 子组件中访问父组件
this.$parent.parentMethod();

// 父组件中访问子组件（不推荐）
this.$children[0].childMethod();

2. 路由参数（跨页面通信）

原理：通过路由参数（params 或 query）在不同路由页面间传递数据，本质是利用 URL 或路由状态传递信息。

适用场景：路由跳转时传递参数（如详情页 ID）。

示例：

// 跳转时传递参数
this.$router.push({
  path: '/detail',
  query: { id: 123 } // 会显示在 URL 中
  // 或 params: { id: 123 } // 需在路由配置中定义，不显示在 URL
});

// 接收参数
this.$route.query.id; // 123

总结：通信方式选择指南

场景	推荐方式	原理核心
父 → 子	Props	属性注入
子 → 父	自定义事件（$emit）	事件派发-监听
兄弟组件	父组件中转 / Pinia	中间层传递 / 全局状态
跨层级组件	Provide/Inject / Pinia	依赖注入 / 全局状态
全局共享状态	Pinia（或 Vuex）	集中式状态管理
路由页面间	路由参数 / Pinia	URL 传递 / 全局状态

核心原则：尽量使用简单方式（props/事件），复杂场景再引入状态管理库，避免过度设计。