Vue3之父子組件異步props數(shù)據(jù)的傳值方式

更新時(shí)間：2025年04月09日 09:48:26 作者：杰迷不寫(xiě)bug

這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue3父子組件異步props數(shù)據(jù)的傳值

在寫(xiě)前端頁(yè)面時(shí)碰到一個(gè)問(wèn)題，就是點(diǎn)擊編輯按鈕傳遞這一行信息給子組件編輯頁(yè)，展示該條數(shù)據(jù)詳細(xì)數(shù)據(jù)；

但還沒(méi)有點(diǎn)擊編輯按鈕，其實(shí)編輯頁(yè)已經(jīng)初始化了，是因?yàn)樵诟附M件中已經(jīng)導(dǎo)入使用了該編輯頁(yè)；

例如：在 Editor.vue中有這樣代碼：

let prop = defineProps(["dataInfo"])
console.log(prop.dataInfo);

進(jìn)入首頁(yè)時(shí)控制臺(tái)已經(jīng)運(yùn)行了這段代碼console.log(prop.dataInfo) 并且為空對(duì)象；

但是子組件并沒(méi)有接收到父組件的數(shù)據(jù)；

原因

是因?yàn)槿绻附M件的props值是通過(guò)異步操作獲取的，那么在最初渲染子組件時(shí)，props可能還沒(méi)有被賦值。而我正是使用異步操作把值通過(guò)props傳給子組件的；

代碼如下：

在父組件一個(gè)函數(shù)中給dataInfo賦值：

// 子組件標(biāo)簽
<Editor :dataInfo="dataInfo" ref="EditorRef" @refresh="funFindItemInfo" />

   
let EditorRef = ref()
let dataInfo = ref({}) //傳遞給編輯頁(yè)的數(shù)據(jù)
//編輯按鈕
function handlEditor(row) {
  dataInfo.value = row;  // 信息傳遞到組件
  EditorRef.value.openEditor()  //打開(kāi)對(duì)話(huà)框

}

解決方案

這種情況下，可以使用watchEffect或watch來(lái)監(jiān)聽(tīng)props的變化，確保當(dāng)props值變化時(shí)能作出相應(yīng)的處理。

小結(jié)：Vue 3中props的值在組件實(shí)例創(chuàng)建初期就被初始化并傳遞給子組件，并且在組件的整個(gè)生命周期內(nèi)，只要父組件的props數(shù)據(jù)發(fā)生變化，就會(huì)觸發(fā)子組件的相應(yīng)更新。

總代碼如下：

父組件：

// 子組件標(biāo)簽
<Editor :dataInfo="dataInfo" ref="EditorRef" @refresh="funFindItemInfo" />

   
let EditorRef = ref()
let dataInfo = ref({}) //傳遞給編輯頁(yè)的數(shù)據(jù)
//編輯按鈕
function handlEditor(row) {
  dataInfo.value = row;  // 信息傳遞到組件
  EditorRef.value.openEditor()  //打開(kāi)對(duì)話(huà)框

}

子組件：

// 標(biāo)簽：
   <el-form-item label="ID">
      <el-input v-model="ItemFormData.id" disabled></el-input>
  </el-form-item>
  <el-form-item label="名字">
      <el-input v-model="ItemFormData.name"></el-input>
  </el-form-item>
  ........


let prop = defineProps(["dataInfo"])
const emit = defineEmits(["refresh"])
let isDialog = ref(false)  // 是否拉開(kāi)抽屜
let ItemFormData = ref({}) // 數(shù)據(jù)對(duì)象
defineExpose({
  // 對(duì)外暴露控制拉開(kāi)抽屜的方法
  openEditor() {
    isDialog.value = true
  },
});


watch(()=>prop.dataInfo,(newVal,oldVal)=>{
        console.log("新值:",newVal);
        console.log("舊值:",oldVal);
        let {id,name,price,detail,pic,address,createtime} = prop.dataInfo //解構(gòu) 切斷響應(yīng)
        ItemFormData.value = {id,name,price,detail,pic,address,createtime}
        console.log("dada", ItemFormData.value);
    })