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的小伙伴来完善把！