快捷導(dǎo)航

Vue3父組件訪問(wèn)子組件方法/屬性的五種方案

更新時(shí)間：2025年03月03日 09:43:54 作者：ttod_qzstudio

在Vue3的組件化開(kāi)發(fā)中,父子組件間的通信是核心功能之一,本文將詳細(xì)介紹五種父組件訪問(wèn)子組件屬性/方法的實(shí)現(xiàn)方案,包含最新的<script setup>語(yǔ)法糖實(shí)踐,需要的朋友可以參考下

一、ref + defineExpose（推薦方案）

通過(guò)組合式API實(shí)現(xiàn)精準(zhǔn)訪問(wèn)，這是Vue3官方推薦的核心方式：

<!-- 子組件 Child.vue  -->
<script setup>
import { ref } from 'vue'
 
const childData = ref('子組件數(shù)據(jù)')
const childMethod = () => console.log(' 方法被觸發(fā)')
 
// 必須暴露才能被父組件訪問(wèn)
defineExpose({
  childData,
  childMethod
})
</script>
 
<!-- 父組件 Parent.vue  -->
<template>
  <Child ref="childRef" />
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
const childRef = ref(null)
 
onMounted(() => {
  console.log(childRef.value.childData)  // 輸出：子組件數(shù)據(jù)
  childRef.value.childMethod()           // 觸發(fā)子組件方法
})
</script>

關(guān)鍵點(diǎn)說(shuō)明：

子組件必須通過(guò)defineExpose顯式暴露屬性/方法
父組件通過(guò)ref.value 訪問(wèn)時(shí)需注意生命周期時(shí)序
支持TS類(lèi)型推導(dǎo)（需配合TypeScript使用）

二、getCurrentInstance（備用方案）

適用于需要訪問(wèn)組件上下文的高級(jí)場(chǎng)景：

// 子組件
defineExpose({ customMethod: () => {} })
 
// 父組件
import { getCurrentInstance } from 'vue'
 
const instance = getCurrentInstance()
const childComponent = instance.refs.childRef 
childComponent.customMethod()

注意事項(xiàng)：

屬于底層API，建議優(yōu)先使用ref方案
需要嚴(yán)格保證組件渲染順序
在SSR環(huán)境中可能出現(xiàn)問(wèn)題

三、事件驅(qū)動(dòng)模式（props + emit）

符合單向數(shù)據(jù)流原則的通信方式：

<!-- 子組件 -->
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
 
const updateData = (val) => {
  emit('update:modelValue', val)
}
</script>
 
<!-- 父組件 -->
<Child :modelValue="parentData" @update:modelValue="handleUpdate"/>

適用場(chǎng)景：

需要維持?jǐn)?shù)據(jù)單向流動(dòng)
表單組件等需要雙向綁定的情況

四、依賴注入模式（provide/inject）

解決深層嵌套組件訪問(wèn)問(wèn)題：

// 祖先組件
provide('sharedData', ref('可響應(yīng)數(shù)據(jù)'))
 
// 后代組件
const data = inject('sharedData')

優(yōu)勢(shì)：

跨多層組件直接訪問(wèn)
配合響應(yīng)式API實(shí)現(xiàn)狀態(tài)共享

五、狀態(tài)管理方案（Pinia/Vuex）

全局狀態(tài)管理場(chǎng)景下的訪問(wèn)方式：

// store/userStore.js 
export const useUserStore = defineStore('user', {
  state: () => ({ userInfo: null })
})
 
// 任意組件
const store = useUserStore()
store.userInfo  = '全局?jǐn)?shù)據(jù)'

適用場(chǎng)景：

需要跨多組件共享狀態(tài)
復(fù)雜應(yīng)用的狀態(tài)管理

注意事項(xiàng)與最佳實(shí)踐

單向數(shù)據(jù)流原則：優(yōu)先考慮props/emit方式傳遞數(shù)據(jù)
封裝性保護(hù)：子組件應(yīng)明確暴露的最小API集合
生命周期時(shí)序：確保在onMounted之后訪問(wèn)ref
TypeScript支持：使用interface定義暴露類(lèi)型

方案對(duì)比表

方法	適用層級(jí)	響應(yīng)式	維護(hù)成本	適用場(chǎng)景
ref + defineExpose	父子	??	低	精準(zhǔn)方法調(diào)用
provide/inject	跨級(jí)	??	中	深層組件共享
事件驅(qū)動(dòng)	父子	??	低	數(shù)據(jù)變更通知
狀態(tài)管理	全局	??	高	復(fù)雜應(yīng)用狀態(tài)共享