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

更新時間：2025年04月09日 09:48:26 作者：杰迷不寫bug

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

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

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

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

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

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

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

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

原因

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

代碼如下：

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

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

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

}

解決方案

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

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

總代碼如下：

父組件：

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

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

}

子組件：

// 標(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)  // 是否拉開抽屜
let ItemFormData = ref({}) // 數(shù)據(jù)對象
defineExpose({
  // 對外暴露控制拉開抽屜的方法
  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);
    })