一、前端-ElementPlus menu菜单无限递归

 1、通过<script>export default {name: "HomeAside",};</script> 导出自己，然后使用自己传入自己children属性实现递归

<template>
  <!-- 实现思路通过vue导出组件名称，在自己里面调用自己，先判断两种最基本情况 -->
  <div>
    <el-menu router>
      <template v-for="item in data.asideData" :key="item.path">
        <!-- 1、判断自己有没有children属性 -->
        <el-menu-item :index="item.path" v-if="!item.children">
          <!-- 全局注册图标  全局组件is属性引入图标 -->
          <el-icon><component :is="item.meta.icon"></icon>
          <span>{{item.meta.title}}</span>
        </el-menu-item>
        <!-- 2、有children属性使用自己组件 -->
        <el-sub-menu :index="item.path" v-if="item.children">
            <template #title>
                <span>{{item.meta.title}}</span>
            </template>
                <HomeAside :asideData="item.children"/>
      </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
const data = defineProps(["asideData"]);
</script>
<script>
export default {
  name: "HomeAside",
};
</script>