我正在研究Nuxt 3,并且在props方面遇到了问题。我通过props将一个对象从父组件传递给子组件,但是当我在控制台打印这些props时,对象似乎是空的,但是如果我将相同的控制台放在mounted方法内的setTimeout函数下面,那么它就能正常工作。请查看下面的代码以获取更多想法。
Parent component
<template> <ChildComponent :form-data="formData.childData" /> <script setup> const formData = reactive({ ... ... }); onMounted(() => { const { data, error } = await useFetch("my-api-url"); if (data.value) { formData = data.value; } }); </script> </template>
子组件
<template> {{ }} <script setup> const props = defineProps({ formData: { type: Object, required: true, default: "", }, }); onMounted(() => { console.log(props.formData); // **Receiving blank object** setTimeout(() => { console.log(props.formData); // **Receiving perfectly ** }, 1000) }); </script> </template>
我尝试在onMounted上使用异步函数onMounted( async () => { ... }),但没有起作用。
如果没有使用setTimeout函数,是否有任何标准选项可以在onMounted上使用props,请帮助我解决这个问题。
在父组件中调用await useFetch("my-api-url")之前,子组件已经挂载,因此在useFetch()获取数据时,您将得到一个空对象作为props。
如果您想在props发生变化时进行监听,可以使用watch:
watch(() => props.formData, (old, new) => { console.log(new); });