Version

3.0.5

Reproduction link

https://github.com/xieyezi/vue3-shopping-airi/blob/a90169475f21b137a2eee52473d78fc684fa70e4/src/views/home/components/HotList.vue#L5

Steps to reproduce

First, I havue three .vue file, They are Home.vue, HotList.vue, GoodItem.vue , and they hierarchical relationship is Home -> HotList -> GoodItem.

In my Home.vue, I have a array called hotList, which type is Ref<Array<Object>>.

I transfer hotList from Home.vue to HotList.vue:

// Home.vue
...
<div class="w-11/12 mt-2">
      <HotList :hotList="hotList"></HotList>
</div>
...

And in HotList.vue, I get hotList by props , and then use v-for to render:

<template>
    <div class="w-full mt-2 h-full bg-indigo-500">
        <div class="w-1/2 h-40 float-left" v-for="(item, index) in hotList" :key="item.goodsId">
            <GoodItem :goodItem="item"></GoodItem>
        </div>
    </div>
</template>

<script lang="ts">
import GoodItem from '@components/GoodItem.vue'

export default defineComponent({
    name: 'GoodItem',
    props: {
        hotList: Array as PropType<Array<GoodItemType>>
    },
    components: {
        GoodItem
    },
    setup() {}
})
</script>

And then in GoodItem.vue:

<template>
    <div class="w-full h-40">
        <img :src="goodItem.goodsPicUrl" :alt="goodItem.goodsName" />
                <p>{{ goodItem.goodsName }}</p>
            <p>{{ goodItem.goodsMiniPrice }}</p>
    </div>
</template>

<script lang="ts">
import { GoodItem as GoodItemType } from '@src/store/home'
import { defineComponent, PropType } from 'vue'

export default defineComponent({
    name: 'GoodItem',
    props: {
        goodItem: {
            type : Object as PropType<GoodItemType>,
            default: {}
        }
    }
})
</script>

But I can't get goodItem by props in GoodItem.vue :

So how can I get the Object props in sub-component?

What is expected?

Get the props correctly in the sub-component.

What is actually happening?

can't get the props correctly in the sub-component.

I find it myself ,That is because my HotList.vue name is error....