Vue组件OnMounted传props出现“Expected Object, got Undefined”警告

你遇到的问题是组件初始化时items为undefined，不符合Grid组件items props的Object类型要求，导致类型检查警告。以下是几种可行的解决方式：

1. 给items设置符合类型的初始值 #

直接在初始化ref时给一个空对象，让items从一开始就满足Object类型要求，避免undefined传递给子组件：

<template>
  <Grid :items="items" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Grid from '@/components/Grid.vue'
import { getData } from '@/services/getData'

// 初始化空对象，匹配props的Object类型
const items = ref({})

onMounted(async () => {
  items.value = await getData()
})
</script>

这种方式最简单，适合Grid组件能处理空对象的场景，初始时组件会展示空状态，数据加载完成后自动更新。

2. 在setup中直接获取数据（配合Suspense） #

onMounted是组件挂载后才执行的钩子，如果你想在组件渲染前就获取数据，可以直接在setup中调用getData，但需要将setup声明为异步，同时用Suspense组件包裹，处理加载状态：

<template>
  <Suspense>
    <template #default>
      <Grid :items="items" />
    </template>
    <template #fallback>
      <div>加载数据中...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { ref } from 'vue'
import Grid from '@/components/Grid.vue'
import { getData } from '@/services/getData'

const items = ref({})
// setup阶段直接获取数据，无需等待挂载
items.value = await getData()
</script>

这种方式能确保渲染Grid时数据已经就绪，但需要注意Suspense的使用限制（通常用于路由组件或根组件层级）。

3. 条件渲染Grid组件 #

只有当items获取完成后再渲染Grid，从根源上避免传递undefined：

<template>
  <Grid v-if="items" :items="items" />
  <div v-else>加载中...</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Grid from '@/components/Grid.vue'
import { getData } from '@/services/getData'

const items = ref()

onMounted(async () => {
  items.value = await getData()
})
</script>

这种方式适合Grid组件无法处理空值或undefined的场景，先展示加载提示，数据就绪后再渲染组件。

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