Vue 3 组件通信：Props 与 Event Bus

1. Props 通信

父组件通过属性向子组件传递数据，子组件通过 defineProps 接收：

<!-- 父组件 -->
<template>
  <Child :message="parentMsg" />
</template>

<script setup>
import { ref } from 'vue';
const parentMsg = ref("来自父组件的数据");
</script>

<!-- 子组件 -->
<script setup>
const props = defineProps(['message']);
console.log(props.message); // 输出：来自父组件的数据
</script>

特点：

• 单向数据流（父 → 子）
• 类型安全（可通过 defineProps<{ message: string }> 定义类型）
• 适用于直接父子关系

2. Event Bus 通信

通过事件总线实现任意组件间通信（需第三方库如 mitt）：

npm install mitt

实现步骤：

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();

发送事件（组件A）：

<script setup>
import { emitter } from './eventBus';
emitter.emit('custom-event', { data: '跨组件数据' });
</script>

接收事件（组件B）：

<script setup>
import { emitter } from './eventBus';
emitter.on('custom-event', (payload) => {
  console.log(payload.data); // 输出：跨组件数据
});
</script>

特点：

• 任意组件间通信（非父子也可）
• 需手动管理事件监听/移除（避免内存泄漏）
• 适用于简单场景，复杂状态建议用 Pinia

3. 对比与使用场景

推荐原则：

• 优先用 Props（官方推荐，数据流清晰）
• 简单跨组件通信用 Event Bus
• 复杂全局状态用 Pinia/Vuex