Vue3+Element-plus 实现递归组件

递归：自己调用自己，需要设置中断条件，否则就是死循环了

• 就是组件自己调用自己设置一个终止条件，主要看网上记录的都有点麻烦，写个简单的demo
• 声明一个组件，用来引入需要递归的组件

<script setup>
// 引入递归组件，也可以注册成全局组件
import NavList from './navList.vue'
// 用作渲染组件的数据
import { navListData } from '../assets/data/index'
import { ref, reactive } from 'vue'
let leftNavDataList = reactive(navListData)

</script>
<template>
   <div class="main-left-nav">
      <el-menu  @select="handSelect">
         <template v-for="(item, i) in leftNavDataList" :key="i">
            // 递归的组件
            <NavList :list="item"></NavList>
         </template>
      </el-menu>
   </div>

</template>
<style scoped lang="scss"></style>

• 递归的组件(主要的)