Vue3-父子组件异步props数据的传值

在写前端页面时碰到一个问题，就是点击编辑按钮传递这一行信息给子组件编辑页，展示该条数据详细数据；但还没有点击编辑按钮，其实编辑页已经初始化了，是因为在父组件中已经导入使用了该编辑页；例如在 Editor.vue中有这样代码：

let prop = defineProps(["dataInfo"])

console.log(prop.dataInfo);

进入首页时控制台已经运行了这段代码console.log(prop.dataInfo) 并且为空对象；

但是子组件并没有接收到父组件的数据；

原因：

是因为如果父组件的props值是通过异步操作获取的，那么在最初渲染子组件时，props可能还没有被赋值。而我正是使用异步操作把值通过props传给子组件的；代码如下：

在父组件一个函数中给dataInfo赋值：

// 子组件标签
<Editor :dataInfo="dataInfo" ref="EditorRef" @refresh="funFindItemInfo" />

   
let EditorRef = ref()
let dataInfo = ref({}) //传递给编辑页的数据
//编辑按钮
function handlEditor(row) {
  dataInfo.value = row;  // 信息传递到组件
  EditorRef.value.openEditor()  //打开对话框

}

解决方案：

这种情况下，可以使用watchEffect或watch来监听props的变化，确保当props值变化时能作出相应的处理。

总结：

Vue 3中props的值在组件实例创建初期就被初始化并传递给子组件，并且在组件的整个生命周期内，只要父组件的props数据发生变化，就会触发子组件的相应更新。

总代码如下：

父组件：

// 子组件标签
<Editor :dataInfo="dataInfo" ref="EditorRef" @refresh="funFindItemInfo" />

   
let EditorRef = ref()
let dataInfo = ref({}) //传递给编辑页的数据
//编辑按钮
function handlEditor(row) {
  dataInfo.value = row;  // 信息传递到组件
  EditorRef.value.openEditor()  //打开对话框

}

子组件：

// 标签：
   <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({}) // 数据对象
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 //解构 切断响应
        ItemFormData.value = {id,name,price,detail,pic,address,createtime}
        console.log("dada", ItemFormData.value);
    })