Vue3组件通信的实战指南

本文将拆解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>

性能对比：

三、全局状态管理：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父组件中转

方案对比（以“购物车数量同步”为例）

父组件中转示例：

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>

五、通信方式选型指南

按场景选择（附智优达实战案例）

1. 父子组件：Props+Emit（基础场景）、v-model（表单组件）
   • 案例：后台管理系统的“数据表格+分页器”组件通信
2. 跨层级（3层以上）：provide/inject
   • 案例：电商网站的“用户登录状态”穿透传递（Header→商品列表→商品详情）
3. 全局共享：Pinia
   • 案例：多页面共享的“购物车数据”“用户信息”
4. 兄弟组件：父组件中转（小规模）、Pinia（大规模）

   • 案例：首页“搜索框”与“搜索结果列表”的关键词同步