Vue3 Composition API多层子组件传递数组Props报错求助

核心错误 #

你在A.vue中创建响应式数组的方式有误：reactive({ ["hello", "no"] }) 创建的是一个类数组对象，而非真正的Array实例。虽然B组件中能通过下标访问值，但Vue的Props类型校验会将其识别为Object，传递到C组件时，不符合C定义的Array类型约束，最终导致props.arr为undefined，读取下标0时报错。

修正步骤 #

1. 修正A.vue的响应式数组创建
   直接用reactive包裹数组（或用ref，更适合数组/基本类型）：

   // A.vue
   <script setup>
   import B from "./B.vue";
   import { reactive } from "vue";
   // 正确创建响应式数组
   let arrayData = reactive(["hello", "no"])
   </script>
   <template>
     <B :arr="arrayData" />
   </template>
   

2. 保持B组件的传递逻辑
   B组件只需正常接收Props并传递给C：

   // B.vue
   <script setup>
   import C from "./C.vue";
   const props = defineProps({
     arr: {
       type: Array
     }
   })
   </script>
   <template>
     <C :arr="props.arr" />
   </template>
   

3. 优化C组件的Props定义
   给Array类型Props添加默认空数组，避免未传递时的报错：

   // C.vue
   <script setup>
   const props = defineProps({
     arr: {
       type: Array,
       default: () => [] // 默认空数组
     }
   })
   </script>
   <template>
     {{ props.arr[0] }}
   </template>
   

为什么原来的写法会报错 #

reactive({ ["hello", "no"] }) 等价于创建了一个包含0: "hello"、1: "no"、length:2的对象，属于类数组结构但不是Array实例。B组件能读取下标是因为类数组支持下标访问，但Vue的Props类型校验会拒绝将其识别为Array，传递到C时props.arr不符合类型要求，最终变为undefined，导致读取props.arr[0]时抛出"Reading '0'"错误。

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