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长度限制）

---

四、开发建议与避坑指南

通信方式选择矩阵：

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

性能优化：

大对象传递使用shallowRef 避免在v-for中使用复杂计算属性高频事件使用防抖（如搜索建议） const heavyData = shallowRef({/* 大数据对象 */});

常见错误：

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

TypeScript增强：

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

---

五、面试深度问题参考

Event Bus内存泄漏如何解决？

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

Vuex和Pinia的核心区别？

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

Provide/Inject如何实现响应式？

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

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