在 Vue3 的日常開發(fā)中，組件間的數(shù)據(jù)傳遞與通信是最基本的操作。面對(duì)不同的組件關(guān)系（父子、祖孫、兄弟、任意組件）和不同的交互需求（單向、雙向、共享狀態(tài)、跨層級(jí)透?jìng)鳎?，Vue3 提供了豐富而靈活的傳參方案。本文將對(duì) Vue3 中常見的傳參方式進(jìn)行系統(tǒng)梳理，對(duì)比它們的特性和適用場(chǎng)景，幫助你根據(jù)實(shí)際情況做出最合適的選擇。

一、父子組件通信

1. Props —— 父?jìng)髯?/h3>

父組件通過自定義屬性向子組件傳遞數(shù)據(jù)，子組件用 defineProps 聲明接收。

<!-- 父組件 -->
<Child :title="pageTitle" :count="10" />
<!-- 子組件 -->
<script setup>
const props = defineProps({
  title: String,
  count: Number
})
</script>
<template>
  <h1>{{ props.title }}</h1>
</template>

• 優(yōu)點(diǎn)：?jiǎn)蜗驍?shù)據(jù)流，清晰可追蹤，是 Vue 官方推薦的基礎(chǔ)傳參方式。
• 缺點(diǎn)：只能父?jìng)髯?；?dāng)需要層層傳遞時(shí)，中間組件也會(huì)被迫接收無關(guān)屬性。
• 場(chǎng)景：絕大部分父組件向直接子組件傳遞數(shù)據(jù)的場(chǎng)景。

2. Emits —— 子傳父

子組件通過 defineEmits 聲明事件，觸發(fā)時(shí)將數(shù)據(jù)作為參數(shù)回傳給父組件。

<!-- 子組件 -->
<script setup>
const emit = defineEmits(['update', 'delete'])
function handleClick() {
  emit('update', { id: 1, value: 'new' })
}
</script>
<!-- 父組件 -->
<Child @update="handleUpdate" />

• 優(yōu)點(diǎn)：符合單向數(shù)據(jù)流，事件命名清晰，易于維護(hù)。
• 缺點(diǎn)：只能子傳父，跨多級(jí)通信時(shí)代碼會(huì)變?nèi)唛L(zhǎng)。
• 場(chǎng)景：子組件通知父組件發(fā)生了某個(gè)行為，并傳遞附屬數(shù)據(jù)。

3. v-model —— 雙向綁定

Vue3 支持多個(gè) v-model 綁定，本質(zhì)是 prop + emit 的語法糖。子組件通過 defineProps 接收 modelValue，通過 defineEmits 觸發(fā) update:modelValue。

<!-- 父組件 -->
<CustomInput v-model="text" v-model:visible="show" />
<!-- 子組件 -->
<script setup>
const props = defineProps({
  modelValue: String,
  visible: Boolean
})
const emit = defineEmits(['update:modelValue', 'update:visible'])
function updateValue(e) {
  emit('update:modelValue', e.target.value)
}
</script>

• 優(yōu)點(diǎn)：語義化的雙向綁定，簡(jiǎn)潔高效；支持多個(gè) v-model 和自定義修飾符。
• 缺點(diǎn)：仍是父子通信的延伸，不適用于跨層級(jí)。
• 場(chǎng)景：表單控件、彈窗顯隱、任何需要子組件即時(shí)同步數(shù)據(jù)到父組件的場(chǎng)景。

4. Ref +defineExpose—— 父組件直接訪問子組件

父組件通過 ref 獲取子組件實(shí)例，子組件通過 defineExpose 暴露方法和數(shù)據(jù)。

<!-- 父組件 -->
<script setup>
import { ref } from 'vue'
const childRef = ref(null)
function focusInput() {
  childRef.value?.focus()
}
</script>
<template>
  <Child ref="childRef" />
</template>
<!-- 子組件 -->
<script setup>
import { ref } from 'vue'
const inputRef = ref(null)
function focus() {
  inputRef.value?.focus()
}
defineExpose({ focus })
</script>

• 優(yōu)點(diǎn)：父組件可以命令式地調(diào)用子組件方法，比事件更直接。
• 缺點(diǎn)：破壞了組件封裝性，增加了耦合；只能用于父子之間。
• 場(chǎng)景：需要父組件集中控制子組件行為（如調(diào)用子組件內(nèi)部方法、手動(dòng)獲取表單值等），且沒有更優(yōu)雅的聲明式替代方案時(shí)。

二、祖孫 / 跨層級(jí)通信

5. provide / inject —— 依賴注入

祖先組件通過 provide 提供數(shù)據(jù)，任意后代組件通過 inject 接收。

<!-- 祖先組件 -->
<script setup>
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)
</script>
<!-- 后代組件 -->
<script setup>
import { inject } from 'vue'
const theme = inject('theme', 'light') // 可設(shè)默認(rèn)值
</script>

• 優(yōu)點(diǎn)：任意跨層級(jí)傳遞，無需中間組件參與；響應(yīng)式數(shù)據(jù)依然保持響應(yīng)。
• 缺點(diǎn)：數(shù)據(jù)來源不夠直觀，依賴注入的 key 可能沖突；過度使用會(huì)導(dǎo)致組件間關(guān)系模糊。
• 場(chǎng)景：全局主題、語言、用戶信息、表單禁用狀態(tài)等需要跨層級(jí)共享的數(shù)據(jù)。

6. 透?jìng)?Attributes ($attrs)

父組件傳遞給子組件、但子組件未聲明為 props 的屬性，會(huì)被自動(dòng)透?jìng)鞯阶咏M件的根元素上?？赏ㄟ^ useAttrs() 獲取這些屬性。

<!-- 父組件 -->
<Child class="box" data-test="hello" />
<!-- 子組件 -->
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class) // 'box'
</script>
<template>
  <div v-bind="attrs">...</div>
</template>

• 優(yōu)點(diǎn)：簡(jiǎn)化了“中間組件轉(zhuǎn)發(fā)屬性”的模板代碼；適合構(gòu)建二次封裝組件。
• 缺點(diǎn)：只能傳遞屬性，不適合傳遞復(fù)雜邏輯數(shù)據(jù)；多層透?jìng)鲿r(shí)調(diào)試?yán)щy。
• 場(chǎng)景：封裝 UI 組件庫(kù)時(shí)，將未識(shí)別的屬性和事件自動(dòng)傳遞給底層原生元素或組件。

三、全局狀態(tài)管理

7. Pinia（或 Vuex）

將共享狀態(tài)抽離到全局 Store 中，任意組件都可以直接讀寫。

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
})

<!-- 任意組件 -->
<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>
<template>
  <span>{{ counter.count }}</span>
  <button @click="counter.increment()">+</button>
</template>

• 優(yōu)點(diǎn)：真正解耦，任意層級(jí)、任意關(guān)系的組件都能共享數(shù)據(jù)和邏輯；支持 DevTools 調(diào)試。
• 缺點(diǎn)：引入了額外的庫(kù)和概念，簡(jiǎn)單場(chǎng)景下可能過于繁重。
• 場(chǎng)景：多個(gè)組件（特別是非父子關(guān)系的）需要共享同一份狀態(tài)，如用戶登錄狀態(tài)、購(gòu)物車數(shù)據(jù)、多步驟表單中間數(shù)據(jù)等。

8. 組合式函數(shù)（Composables）共享狀態(tài)

將響應(yīng)式狀態(tài)和邏輯抽取到一個(gè)組合函數(shù)中，利用 Vue 的模塊單例特性實(shí)現(xiàn)共享。

// composables/useSharedCount.js
import { ref } from 'vue'
const count = ref(0) // 模塊作用域單例
export function useSharedCount() {
  function increment() { count.value++ }
  return { count, increment }
}

<!-- 任意組件 -->
<script setup>
import { useSharedCount } from '@/composables/useSharedCount'
const { count, increment } = useSharedCount()
</script>

• 優(yōu)點(diǎn)：比 Pinia 更輕量，適合簡(jiǎn)單共享狀態(tài)；與組合式 API 天然契合。
• 缺點(diǎn)：無 DevTools 支持，不方便持久化和中間件；狀態(tài)難以被手動(dòng)清理；對(duì)服務(wù)端渲染需要額外處理。
• 場(chǎng)景：簡(jiǎn)單的跨組件共享，如某幾個(gè)鄰近組件的臨時(shí)狀態(tài)、無需嚴(yán)格管理的全局變量。

四、其他常見傳參方式

9. 事件總線（mitt / tiny-emitter）

Vue3 移除了 $on/$off，可引入第三方庫(kù)如 mitt 實(shí)現(xiàn)任意組件間的發(fā)布-訂閱通信。

• 優(yōu)點(diǎn)：完全不關(guān)心組件層級(jí)，任意組件可觸發(fā)和監(jiān)聽事件。
• 缺點(diǎn)：全局事件容易造成“事件爆炸”，難以追蹤數(shù)據(jù)流；不利于類型推導(dǎo)；組件銷毀時(shí)需要手動(dòng)解綁。
• 場(chǎng)景：極少組件間的松耦合通信，或遺留項(xiàng)目遷移時(shí)的過渡方案。新項(xiàng)目不推薦優(yōu)先使用。

10. 路由傳參 (Vue Router)

通過路由參數(shù)、查詢參數(shù)或狀態(tài)傳遞數(shù)據(jù)。

• 優(yōu)點(diǎn)：可在 URL 上持久化部分狀態(tài)，方便分享和收藏；頁(yè)面間解耦。
• 缺點(diǎn)：僅適用于路由跳轉(zhuǎn)場(chǎng)景，參數(shù)大小受限。
• 場(chǎng)景：頁(yè)面間傳遞標(biāo)識(shí)符（ID）、過濾條件等；需要從 URL 直接定位的狀態(tài)。

11. 插槽（作用域插槽）

父組件通過作用域插槽接收子組件暴露的數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)回傳渲染。

<!-- 子組件 -->
<template>
  <slot :data="list" :loading="isLoading" />
</template>
<!-- 父組件 -->
<Child>
  <template v-slot="{ data, loading }">
    <Spinner v-if="loading" />
    <List :items="data" />
  </template>
</Child>

• 優(yōu)點(diǎn)：將渲染控制權(quán)交給父組件，但數(shù)據(jù)仍由子組件提供；非常靈活。
• 缺點(diǎn)：只適用于父子關(guān)系，且邏輯偏向 UI 層的組合。
• 場(chǎng)景：列表渲染、容器組件的動(dòng)態(tài)布局、任何需要“數(shù)據(jù)在子組件，但渲染方式由父組件決定”的情形。

五、傳參方式對(duì)比總結(jié)

六、如何選擇？

沒有銀彈。實(shí)際開發(fā)中可以遵循以下準(zhǔn)則：

1. 首選最局部的方式：父子通信優(yōu)先用 props + emits；需要雙向綁定就用 v-model，避免過早使用全局狀態(tài)。
2. 跨層級(jí)但不頻繁變動(dòng)的數(shù)據(jù)，用 provide/inject，再配合 readonly 或回調(diào)限定修改權(quán)限。
3. 多組件共享同一業(yè)務(wù)狀態(tài)，毫不猶豫使用 Pinia，它的結(jié)構(gòu)化管理和調(diào)試能力會(huì)省去大量排查時(shí)間。
4. 封裝基礎(chǔ)組件時(shí)，通過 useAttrs() 和 v-bind="$attrs" 透?jìng)鲗傩?，保持靈活性。
5. 避免事件總線，除非你十分清楚自己在做什么，且能將全局事件控制在一個(gè)極小范圍內(nèi)。

理解每種方式的邊界和開銷，能讓你在編寫組件時(shí)更加游刃有余。Vue3 提供的組合式 API 配合其豐富的通信機(jī)制，幾乎能夠優(yōu)雅地解決所有組件通信難題。

以上就是Vue3中常見的組件傳參方式大全及對(duì)比詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3組件傳參方式大全的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論