在mounted方法中,Nuxt 3的props值第一次没有接收到。
P粉418351692
P粉418351692 2023-07-19 17:47:03
0
1
451

我正在研究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,请帮助我解决这个问题。

P粉418351692
P粉418351692

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!