Vue 中组件通信的方式有哪些，如何实现父子组件和非父子组件之间的通信？

一、父子组件通信（垂直通信）

1. Props 传值（父 → 子）

实现方案：

<!-- Parent.vue -->
<template>
  <Child :user="userData" />
</template>

<script setup>
import { ref } from 'vue';
const userData = ref({ name: '小明', age: 18 });
</script>

<!-- Child.vue -->
<template>
  <div>{{ user.name }}今年{{ user.age }}岁</div>
</template>

<script setup>
defineProps({
  user: {
    type: Object,
    required: true
  }
});
</script>

注意事项：

• 避免直接修改props数据（需用emit通知父组件修改）
• 复杂对象建议使用toRefs解构保持响应式
• 推荐使用TS类型校验（Vue3）

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

实现方案：

<!-- Child.vue -->
<template>
  <button @click="submit">提交成绩</button>
</template>

<script setup>
const emit = defineEmits(['score-change']);
const submit = () => {
  emit('score-change', 95); // 触发事件并传参
};
</script>

<!-- Parent.vue -->
<template>
  <Child @score-change="handleScore" />
</template>

<script setup>
const handleScore = (score) => {
  console.log('收到子组件分数:', score);
};
</script>

开发建议：

• 事件命名使用kebab-case（如update:value）
• 复杂数据建议封装为对象传递
• 避免在事件中直接修改父组件状态（保持单向数据流）

---

二、非父子组件通信（跨层级/兄弟）

1. 事件总线（Event Bus）

实现方案：

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

// ComponentA.vue（发送方）
import { bus } from './eventBus';
bus.emit('global-msg', '紧急通知：服务器宕机！');

// ComponentB.vue（接收方）
import { bus } from './eventBus';
onMounted(() => {
  bus.on('global-msg', (msg) => {
    alert(msg);
  });
});

// 组件卸载时需移除监听
onUnmounted(() => {
  bus.off('global-msg');
});

适用场景：

• 简单应用中的全局通知
• 临时性跨组件交互
• 不适合复杂状态管理（容易导致事件混乱）

2. Vuex/Pinia（状态管理）

核心流程：

// store/user.js（Pinia示例）
export const useUserStore = defineStore('user', {
  state: () => ({ token: '', profile: null }),
  actions: {
    async login(credentials) {
      const res = await api.login(credentials);
      this.token = res.token;
      this.profile = res.user;
    }
  }
});

// Login.vue（修改状态）
import { useUserStore } from '@/store/user';
const store = useUserStore();
const handleLogin = () => {
  store.login({ username, password });
};

// Header.vue（读取状态）
const store = useUserStore();
const username = computed(() => store.profile?.name);

最佳实践：

• 业务模块拆分store（用户、订单、配置等）
• 避免直接修改state，使用actions封装业务逻辑
• 配合TS实现类型安全（Vue3+Pinia）

3. Provide/Inject（跨层级注入）

实现方案：

<!-- RootComponent.vue -->
<script setup>
import { provide } from 'vue';
const appConfig = reactive({ theme: 'dark' });
provide('appConfig', appConfig);
</script>

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';
const config = inject('appConfig');
const toggleTheme = () => {
  config.theme = config.theme === 'dark' ? 'light' : 'dark';
};
</script>

使用建议：

• 适用于全局配置（主题、权限、语言）
• 避免滥用（会破坏组件独立性）
• 建议配合readonly防止意外修改

---

三、特殊场景解决方案

1. 模板引用（Refs）

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

<script setup>
const childRef = ref(null);
const callChildMethod = () => {
  childRef.value.updateData('新数据'); // 直接调用子组件方法
};
</script>

<!-- Child.vue -->
<script setup>
const updateData = (data) => {
  // 业务逻辑
};
// 必须暴露方法
defineExpose({ updateData });
</script>

注意事项：

• 破坏封装性，慎用
• 适用于第三方库组件的方法调用
• 避免直接操作子组件DOM

2. 路由参数通信

// 组件A跳转
router.push({
  path: '/detail',
  query: { id: 123 }
});

// 组件B获取
import { useRoute } from 'vue-router';
const route = useRoute();
const id = route.query.id;

适用场景：

• 页面间简单参数传递
• 需持久化的筛选条件
• 不适合复杂对象（URL长度限制）

---

四、开发建议与避坑指南

1. 通信方式选择矩阵：

   场景	推荐方案	不推荐方案
   父子简单数据传递	Props/Events	Refs/Vuex
   跨层级配置	Provide/Inject	Event Bus
   复杂全局状态	Pinia/Vuex	多层Props传递
   临时性事件通知	Event Bus	Vuex

2. 性能优化：

   • 大对象传递使用shallowRef
     • 避免在v-for中使用复杂计算属性
     • 高频事件使用防抖（如搜索建议）

   const heavyData = shallowRef({/* 大数据对象 */});

3. 常见错误：

   // 错误：直接修改props
   props.user.name = 'newName'; // ❌
   
   // 正确：触发事件
   emit('update:user', { ...props.user, name: 'newName' }); // ✅

4. TypeScript增强：

   // 带类型的事件声明
   const emit = defineEmits<{
     (e: 'update:modelValue', value: string): void
     (e: 'submit', payload: FormData): void
   }>();

---

五、面试深度问题参考

1. Event Bus内存泄漏如何解决？

   • 答：组件卸载时移除监听，使用onUnmounted生命周期

2. Vuex和Pinia的核心区别？

   • 答：Pinia支持TS类型推断、去除了mutations、更简洁的API设计

3. Provide/Inject如何实现响应式？

   • 答：注入reactive对象或配合computed使用

组件通信是Vue应用设计的核心，建议根据项目规模选择合适方案。小型项目用Props/Events + Event Bus，中大型项目推荐Pinia状态管理，超大型微前端架构可考虑结合Vuex + Custom Events。