Vue3子组件onMounted中无法获取jsonUrl props的问题咨询

问题现象 #

子组件中通过defineProps定义的jsonUrl属性，在模板中直接使用{{jsonUrl}}可以正常显示，但在onMounted回调里无法访问；同时直接给ref变量赋值（如images = jsonData["images"]）会丢失响应式，导致模板无法更新数据。

解决步骤 #

1. 正确接收Props #

在<script setup>中，defineProps返回的是响应式对象，需解构为普通变量才能在异步回调中正常访问：

const { jsonUrl } = defineProps({
  jsonUrl: {
    type: String,
    default: ""
  }
})

2. 正确更新Ref变量 #

ref声明的变量必须通过.value属性修改值，直接赋值会覆盖响应式引用，导致模板无法感知数据变化：

// 错误写法
images = jsonData["images"];
// 正确写法
images.value = jsonData["images"];

3. 配合Suspense优化异步加载 #

父组件已使用<Suspense>，可直接在子组件的setup中用async/await加载数据，无需依赖onMounted，让加载状态管理更精准。

修改后的完整代码 #

ParentComponent.vue #

<Suspense>
  <div class="row g-0">
    <div class="col-md-3">
      <ChildComponent json-url="some/url/to/json/data" />
    </div>
    <div class="col-md-3">
      <ChildComponent json-url="some/url/to/json/data" />
    </div>
    <div class="col-md-3">
      <ChildComponent json-url="some/url/to/json/data" />
    </div>
    <div class="col-md-3">
      <ChildComponent json-url="some/url/to/json/data" />
    </div>
  </div>

  <template #fallback>
    <p>Loading...</p>
  </template>
</Suspense>

ChildComponent.vue #

<template>
  <div v-if="jsonUrl">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
    <img v-if="thumbnail" :src="thumbnail" alt="Thumbnail" />
    <div v-if="images.length">
      <img v-for="img in images" :key="img" :src="img" alt="Gallery image" />
    </div>
  </div>
  <div v-else>
    <p>No data source specified</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 解构接收props
const { jsonUrl } = defineProps({
  jsonUrl: {
    type: String,
    default: ""
  }
})

const images = ref([]);
const thumbnail = ref("");
const title = ref("");
const description = ref("");

// 直接在setup中异步加载数据，配合Suspense
if (jsonUrl) {
  try {
    const response = await fetch(new URL(jsonUrl, import.meta.url).href);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const jsonData = await response.json();

    // 正确更新ref的value
    images.value = jsonData["images"] || [];
    thumbnail.value = jsonData["thumbnail"] || "";
    title.value = jsonData["title"] || "";
    description.value = jsonData["description"] || "";
    
  } catch (error) {
    console.error('Error fetching the JSON file:', error);
  }
}
</script>

关键说明 #

• 解构defineProps返回的对象，确保异步回调中能正常访问jsonUrl；
• 始终通过.value修改ref变量，维持响应式特性；
• 利用async setup配合<Suspense>，让加载状态管理更自然，无需手动在onMounted中处理异步逻辑。

内容的提问来源于stack exchange，提问作者Roland Deschain