Vue3之父子组件异步props数据的传值方式
作者：杰迷不写bug
这篇文章主要介绍了Vue3之父子组件异步props数据的传值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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);
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。