Vue 3使用Suspense导致Props丢失？异步Setup问题咨询

核心问题分析 #

你的代码里有两个关键问题导致props拿不到：

• Home组件未声明接收路由传递的lId prop：路由配置里props: true会把/:lId参数传给Home组件，但Home没在props选项里声明这个字段，Vue就把它当成「非props属性」，进而触发警告。
• Home组件未将lId传递给EventDash子组件：你说同步setup能拿到值，其实是移除Suspense后，Vue的非props属性透传机制生效了（父组件根元素为单个子组件时，未声明的属性会自动传给子组件），但这是隐式行为，并非正确的传参方式；而包裹Suspense后，透传失效，子组件自然拿不到值。

具体修复步骤 #

1. 修正Home组件，声明并传递Props

修改Home组件，先声明接收lId，再显式传递给EventDash：

<template>
  <Suspense>
    <template #default>
      <!-- 显式传递lId给子组件 -->
      <EventDash :lId="lId" />
    </template>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

<script>
import EventDash from '@/components/EventDash.vue'
export default {
  name: 'home',
  // 声明接收路由传递的lId prop
  props: ['lId'],
  components: { EventDash }
}
</script>

2. 确保EventDash的Async Setup正确接收Props

Async setup中的props依然是响应式的，直接访问即可。如果需要解构后保持响应式，可以使用toRefs：

<script>
import { toRefs } from 'vue'
export default {
  name: "eventDash",
  props: ["lId"],
  async setup(props) {
    // 直接访问props.lId
    console.log('prop', props.lId)
    
    // 解构后保持响应式的写法
    const { lId } = toRefs(props)
    console.log('响应式prop', lId.value)
    
    // 你的异步逻辑，比如await获取数据
    // const data = await fetchData(lId.value)
  }
}
</script>

额外说明 #

移除Suspense后能拿到值是因为Vue的隐式透传，但这种方式不利于代码维护，且当父组件根元素是Suspense（或多个根元素）时透传会直接失效。显式声明并传递props才是规范且可靠的写法，同时也能消除你遇到的非props属性警告。

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