vue3组件递归 (5分钟学会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";
export default {
  name: "tree-list",
  props: {
       Arr: { type: Array },
       index: { type: Number }
  },
  setup(props) {
    let index = props.index ? props.index : 0;
    index += 1;
    
    const closeList = reactive([]);
    function onoff(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";
export default {
  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的小伙伴来完善把！