5分钟学会 vue3组件递归 (实现Tree级菜单)

1. 什么是组件递归

通俗的讲 ：
① 组件导入自己本身 。
②一般 根据 children或是 是否有下一层的属性去判断是否结束。

2.以 Tree 树形菜单为例

3.代码实现

① Tree.vue 代码：
参数=>解释onoff() 函数1.通过判断是否在id是否在closeList数组里， 有就删除，没有就添加。
2.在每个标签通过 v-if 判断该id 是否在closeList里 实现显示隐藏props参数=>
Arr (传入的菜单数据)
index(索引：不用传入，默认为1，根据其大小判断没层向右的偏移量)
代码：

<template><div style="width: 200px"><div v-for="item in Arr"><p :style="{ marginLeft: (index - 1) * 10 + 'px'}">//判断是否展开<span @click="onoff(item.id)" v-if="item.children">{{ closeList.includes(item.id)?"➧":"⏷"}}</span>//内容{{ item.text }}</p>//根据传入的值判断 是否需要在递归<tree-list
           v-if="item.children && !closeList.includes(item.id)":Arr="item.children":index="index":key="item.id"/></div></div></template><script>import{ reactive, toRefs, ref }from"vue";exportdefault{
  name:"tree-list",
  props:{
       Arr:{ type: Array },
       index:{ type: Number }},setup(props){let index = props.index ? props.index :0;
    index +=1;const closeList =reactive([]);functiononoff(id){if(closeList.includes(id)){
        closeList.splice(closeList.indexOf(id));}else{
        closeList.push(id);}}return{...toRefs(props), closeList, onoff, index};},};</script>

②使用 xxx.vue 使用该组件

<template><tree-list :Arr="Arr"/></template><script>import treeList from"./Tree.vue";exportdefault{
  components:{ Tree  },setup(){const Arr =[{ id:"1", text:"菜单1", children:[{
            id:"2", text:"菜单1-1",children:[{id:"3",  text:"菜单1-1-1"},{id:"3",  text:"菜单1-1-2"}],},],},{ id:"2",text:"菜单2"}];return{  Arr };},};</script>

没有这么写样式哦，由精通CSS的小伙伴来完善把！