父传子props值为undefined问题

今天调试接口时遇到了父组件传值给子组件，props数据在子组件的template内使用是正常的，但是在script里操作却是空的问题，本来还是摸鱼的闲暇时光一下就紧张了起来

父组件传递details给子组件代码：

<component :details="details" :is="item.component" />

其中details是通过接口获取的

// 获取详情
const details = ref<dataType>({});
function getDetails() {
  getDetailesApi({
    id: props.id
  }).then((res) => {
    if (res.data) details.value = res.data
  })
}

有几个子组件只涉及回显，不需要修改props数据，所以没有发现问题，其中一个子组件需要对数据进行操作，才使用变量接收props，然后发现整个组件都回显不了数据了，控制台打印发现不论是变量值还是props值都为空，但是在template中使用插值表达式还是能展示props的数据，一番查找（百度）之后终于发现，问题出现在接口获取之后再赋值给details这里，因为接口获取是异步的，传值的时候还未给details赋值（始终为初始值{}），所以导致变量值和props值都为空

最后解决办法是增加一个v-if判断

<component v-if="JSON.stringify(details) !== '{}'" :details="details" :is="item.component" />

顺便复习了一下js判断是否为空对象的知识

• JSON.stringify(data) == "{}"
• for in，Object.getOwnPropertyNames()，Object.keys()通过判断是否有属性名进而判断是否为空对象