本文将拆解Vue3的7种通信方式，结合电商、后台管理等真实场景，教你“父子用Props，跨层用provide，全局用Pinia”的黄金法则。
一、父子组件通信：Props/Emit/v-model
1. Props：父传子的“单向快递”
核心场景：商品详情页（父组件）向商品卡片（子组件）传递商品数据
vue
<!-- 父组件 ProductPage.vue --> <template> <ProductCard :product="currentProduct" /> </template> <script setup> import { ref } from 'vue'; const currentProduct = ref({ id: 1, name: 'Vue3实战书', price: 89 }); </script> <!-- 子组件 ProductCard.vue --> <template> <div class="card">{{ product.name }} - ¥{{ product.price }}</div> </template> <script setup> const props = defineProps({ product: { type: Object, required: true, // 复杂类型默认值需用函数返回，避免引用类型共享 default: () => ({ name: '默认商品', price: 0 }) } }); </script>
性能注意：Props传递大对象时，子组件应避免解构赋值（如const { name } = props），直接使用props.product.name可减少响应式依赖追踪开销。
2. Emit：子传父的“事件回调”
核心场景：购物车组件（子）向结算页（父）传递“添加商品”事件
vue
<!-- 子组件 CartItem.vue --> <template> <button @click="handleAdd">加入购物车</button> </template> <script setup> const emits = defineEmits(['add-to-cart']); // 显式声明事件 const handleAdd = () => { emits('add-to-cart', { id: 1, quantity: 1 }); // 传递数据 }; </script> <!-- 父组件 CheckoutPage.vue --> <template> <CartItem @add-to-cart="onAddItem" /> </template> <script setup> const onAddItem = (item) => { console.log(' 收到子组件事件:', item); // { id: 1, quantity: 1 } }; </script>
避坑点：不要用Props传递回调函数（如<Child :onAdd="handleAdd" />），违反单向数据流原则，且难以追踪事件来源。
3. v-model：双向绑定的“语法糖”
核心场景：搜索框组件（子）与父组件共享搜索关键词
vue
<!-- 子组件 SearchInput.vue --> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script setup> defineProps(['modelValue']); // 接收父组件v-model值 defineEmits(['update:modelValue']); // 触发更新事件 </script> <!-- 父组件 SearchPage.vue --> <template> <SearchInput v-model="searchKey" /> <!-- 等价于 <SearchInput :modelValue="searchKey" @update:modelValue="searchKey = $event" /> --> </template> <script setup> import { ref } from 'vue'; const searchKey = ref('Vue组件通信'); </script>
二、跨层级通信：provide/inject
场景：主题切换（祖先组件提供主题，所有后代组件使用）
vue
<!-- 祖先组件 App.vue --> <script setup> import { provide, ref } from 'vue'; const darkMode = ref(false); // 提供响应式数据（用ref包装），后代组件可直接修改 provide('theme', { darkMode, toggle: () => darkMode.value = !darkMode.value }); </script> <!-- 深层子组件 Header.vue --> <script setup> import { inject } from 'vue'; const { darkMode, toggle } = inject('theme'); // 注入数据 </script> <template> <button @click="toggle"> {{ darkMode ? '切换亮色' : '切换暗色' }} </button> </template>
性能对比：
| 通信方式 | 跨层级通信性能 | 适用场景 |
|---|---|---|
| provide/inject | 优（直接穿透） | 主题、权限等全局配置 |
| Props逐层传递 | 差（多层转发） | 最多嵌套2层的父子组件 |
三、全局状态管理：Pinia
核心场景：用户登录状态（多组件共享用户信息）
javascript
// stores/user.js import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state: () => ({ userInfo: null, token: localStorage.getItem('token') }), actions: { login(credentials) { // 模拟API请求 this.userInfo = { id: 1, name: 'Vue开发者' }; this.token = 'fake-token'; localStorage.setItem('token', this.token); } } }); // 组件中使用 <script setup> import { useUserStore } from '@/stores/user'; const userStore = useUserStore(); // 访问状态 console.log(userStore.userInfo?.name); // 调用action userStore.login({ username: 'admin', password: '123' }); </script>
性能优势：Pinia的状态更新是“按需触发”，仅依赖该状态的组件会重新渲染，比Vuex的“统一提交mutation”更高效。
四、兄弟组件通信：事件总线vs父组件中转
方案对比（以“购物车数量同步”为例）
| 方案 | 代码复杂度 | 可维护性 | 适用规模 |
|---|---|---|---|
| 父组件中转 | 低 | 高 | 2-3个兄弟组件 |
| mitt事件总线 | 中 | 低 | 多个兄弟组件 |
| Pinia全局状态 | 中 | 高 | 跨组件共享状态 |
父组件中转示例：
vue
<!-- 父组件 ShoppingPage.vue --> <template> <CartList @update-count="handleCountChange" /> <TotalPrice :count="totalCount" /> </template> <script setup> import { ref } from 'vue'; const totalCount = ref(0); const handleCountChange = (newCount) => { totalCount.value = newCount; // 同步兄弟组件数据 }; </script>
五、通信方式选型指南
按场景选择（附智优达实战案例）
- 父子组件：Props+Emit（基础场景）、v-model（表单组件）
- 案例：后台管理系统的“数据表格+分页器”组件通信
- 跨层级（3层以上）：provide/inject
- 案例：电商网站的“用户登录状态”穿透传递（Header→商品列表→商品详情）
- 全局共享：Pinia
- 案例：多页面共享的“购物车数据”“用户信息”
- 兄弟组件：父组件中转（小规模）、Pinia（大规模）
案例：首页“搜索框”与“搜索结果列表”的关键词同步
