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

一、父子組件通信

1. Props —— 父傳子

父組件通過自定義屬性向子組件傳遞數(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)點：單向數(shù)據(jù)流，清晰可追蹤，是 Vue 官方推薦的基礎傳參方式。
• 缺點：只能父傳子；當需要層層傳遞時，中間組件也會被迫接收無關屬性。
• 場景：絕大部分父組件向直接子組件傳遞數(shù)據(jù)的場景。

2. Emits —— 子傳父

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

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

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

3. v-model —— 雙向綁定

Vue3 支持多個 v-model 綁定，本質是 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)點：語義化的雙向綁定，簡潔高效；支持多個 v-model 和自定義修飾符。
• 缺點：仍是父子通信的延伸，不適用于跨層級。
• 場景：表單控件、彈窗顯隱、任何需要子組件即時同步數(shù)據(jù)到父組件的場景。

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

父組件通過 ref 獲取子組件實例，子組件通過 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)點：父組件可以命令式地調用子組件方法，比事件更直接。
• 缺點：破壞了組件封裝性，增加了耦合；只能用于父子之間。
• 場景：需要父組件集中控制子組件行為（如調用子組件內(nèi)部方法、手動獲取表單值等），且沒有更優(yōu)雅的聲明式替代方案時。

二、祖孫 / 跨層級通信

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') // 可設默認值
</script>

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

6. 透傳 Attributes ($attrs)

父組件傳遞給子組件、但子組件未聲明為 props 的屬性，會被自動透傳到子組件的根元素上?？赏ㄟ^ 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)點：簡化了“中間組件轉發(fā)屬性”的模板代碼；適合構建二次封裝組件。
• 缺點：只能傳遞屬性，不適合傳遞復雜邏輯數(shù)據(jù)；多層透傳時調試困難。
• 場景：封裝 UI 組件庫時，將未識別的屬性和事件自動傳遞給底層原生元素或組件。

三、全局狀態(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)點：真正解耦，任意層級、任意關系的組件都能共享數(shù)據(jù)和邏輯；支持 DevTools 調試。
• 缺點：引入了額外的庫和概念，簡單場景下可能過于繁重。
• 場景：多個組件（特別是非父子關系的）需要共享同一份狀態(tài)，如用戶登錄狀態(tài)、購物車數(shù)據(jù)、多步驟表單中間數(shù)據(jù)等。

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

將響應式狀態(tài)和邏輯抽取到一個組合函數(shù)中，利用 Vue 的模塊單例特性實現(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)點：比 Pinia 更輕量，適合簡單共享狀態(tài)；與組合式 API 天然契合。
• 缺點：無 DevTools 支持，不方便持久化和中間件；狀態(tài)難以被手動清理；對服務端渲染需要額外處理。
• 場景：簡單的跨組件共享，如某幾個鄰近組件的臨時狀態(tài)、無需嚴格管理的全局變量。

四、其他常見傳參方式

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

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

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

10. 路由傳參 (Vue Router)

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

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

11. 插槽（作用域插槽）

父組件通過作用域插槽接收子組件暴露的數(shù)據(jù)，實現(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)點：將渲染控制權交給父組件，但數(shù)據(jù)仍由子組件提供；非常靈活。
• 缺點：只適用于父子關系，且邏輯偏向 UI 層的組合。
• 場景：列表渲染、容器組件的動態(tài)布局、任何需要“數(shù)據(jù)在子組件，但渲染方式由父組件決定”的情形。

五、傳參方式對比總結

六、如何選擇？

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

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

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

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

最新評論