Vue3之父子组件异步props数据的传值方式

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

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

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

}

// 子组件标签
<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);
    })