用props做一个组件，如何用v-for循环出来了

组件：

<template>
    <div>
        <ul>
            <li v-for="(item,index) in nav" :key="index" >
                {{item.name}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        nav:[
            {name:'2'}
        ]
    },
    data(){
        return{
         
        }
    }
    
}
</script>

页面：

<template>
    <div>
        <dh>
            {{item.name}}
        </dh>
    </div>
</template>
<script>
import dh from '../components/dh.vue'
export default {
    components:{
        dh
    },
    data(){
        return{
         nav:[
             {name:1},

         ]
        }
    }
}
</script>

<dh :nav="nav"></dh>

完成如下

<template>
    <div>
        <dh :nav="nav"></dh>
    </div>
</template>
<script>
import dh from '../components/dh.vue'
export default {
    components:{
        dh
    },
    data(){
        return{
         nav:[
             {name:1},
         ]
        }
    }
}
</script>