vue3+element ui组件递归 这里主要用于实现菜单栏

在封装菜单栏不确定子级栏目时候我们就可以用到组件递归来解决这个问题废话少说上代码。

//首先是父组件 
<template>
    <div>
      <div class="barlogo">
        <img src="../assets/img/Vue.png" alt="">
      </div>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="barindex"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        @select	="selectPaht"
      >
         //将你要循环的数据传给子组件
        <itemvue :arr="obj.routerArr" ></itemvue> 
      </el-menu>
    </div>
  </template>
  <script setup>
  import { ref,reactive} from 'vue';
  //在组合式写法当中 引入直接使用即可
  import itemvue from './L_bar/item.vue'
  import { useRouter } from 'vue-router';
  // 默认选中的选中元素
  var barindex=ref(1)
// import { react } from '@babel/types';
  let obj = reactive({
    routerArr:[]
  })
  var router = useRouter()
  obj.routerArr = router.currentRoute.value.matched[0].children
</script>
//这里我们先别着急 因为组件不能自己引入自己我们去main.js进行全局注册以便后面使用
import Ttem from './components/L_bar/item.vue'
app.component('Ttem', Ttem)
//接下来是介绍子组件
<template>
    <div >
      <div  v-for="(item,index) in props.arr" :key="index">
         //这里做出判断 没有子级类目的时候 就可以跳出递归了
        <el-sub-menu :index="index+1" v-if="!(item.children==0)">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{item.ms}}</span>
          </template>
          <el-menu-item-group >
          //因为我们 注册了全局组件 这里直接使用即可 把子级类目 重新传值
            <Ttem  v-for="(item_t,i) in item.children" :key="i" :arr="item.children"></Ttem>
          </el-menu-item-group>
          
        </el-sub-menu>
        <el-menu-item :index="index+1" v-else>
          <el-icon >  </el-icon>
          <span>{{item.ms}}</span>
        </el-menu-item>
      </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import {userInfo} from '@/stores/userinfo'
      var u_info = userInfo()
      //这里是vue3子组件接收参数
      let props= defineProps({
            arr:{
                type:Array
            }
       })
       console.log(props)
</script>

<style>

</style>

以上组件递归的基本代码 有点简单粗暴 每周更新一次 欢迎交流 如果你觉得还不错点点赞，如果觉得依托答辩 请留下您宝贵的意见