vue3 中使用递归组件

递归组件

因为自动组件名推断的缘故，一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 Foo.vue 的组件可以在其模板中用 <Foo/> 引用它自己。

 

实例  显示菜单递归用法

效果图

父组件

<template>
    <ComMenu :list="list" />    
</template>  
<script setup lang="ts">
import ComMenu from './menu.vue'
const list=ref([
    {
        name:"菜单一",
        children:[
            {
                name:"菜单1-1",
                 children:[
                    {
                        name:"菜单1-1-2"
                    }
                ]
            }
        ]
    },
     {
        name:"菜单二",
        children:[
            {
                name:"菜单2-1",
                 children:[
                    {
                        name:"菜单2-1-1"
                    }
                ]
            }
        ]
    }
]);
</script>

子组件  使用了递归调用

<template>
    <ul>
        <li v-for="(item, index) in list" :key="index">
            <p>{{ item.name }}</p>
            <treeMenu :list="item.children"></treeMenu>
        </li>
    </ul>
</template>

<script setup lang="ts" name="treeMenu">
// defineProps({
//     list: Array
// })

interface List {
  name: string,
  children: [],
};
 defineProps<{
  list: List[]
}>()

</script>

<style scoped>
ul {
    padding-left: 20px;
}
</style>