在项目中 有时需要 分级目录 树形目录 这时就可以用到递归组件了
- 递归组件 是指就是组件中嵌套组件自身
首先我们需要一组这样的数据
[
{
"name": "一级目录",
cList: [
{ "name": "二级目录" },
{
"name": "one chicken",
cList: [{ "name": '三级目录', cList: [{ "name": "三级目录" }] }]
}
]
},
{
"name": "第二级一级目录", cList: [
{ "name": ""第二个级二级目录" },
{ "name": "耳机目录" }
]
}
]
新建一个tree.vue 文件
<template>
<li>
<span @click="toggle">
{{ data.name }}
</span>
<ul v-show="open" v-if="hasChild">
<tree-menu v-for="(item, index) in data.children" :data="item" :key="index"></tree-menu>
</ul>
</li>
</template>
<script>
export default {
name: 'TreeMenu',//组件递归必须有name属性 不然无法递归
props: {
data: {
type: Object, //校验父组件传过来的数据是佛正确
required: true //是否为必传数据
}
},
data() {
return {
open: false
}
},
computed: {
hasChild() {
return this.data.children && this.data.children.length //判断当前子组件有没有数据
}
},
methods: {
toggle() {
if(this.hasChild) {
this.open = !this.open
}
}
}
}
</script>
接下来就可以调用tree.vue这个组件了 我们在某个组件中调用此组件
<template>
<div class="tree-menu">
<ul v-for="item in data">
<my-tree :data="item"></my-tree>
</ul>
</div>
</template>
<script>
var treeData = [
{
"name": "一级目录",
cList: [
{ "name": "二级目录" },
{
"name": "one chicken",
cList: [{ "name": '三级目录', cList: [{ "name": "三级目录" }] }]
}
]
},
{
"name": "第二级一级目录", cList: [
{ "name": ""第二个级二级目录" },
{ "name": "耳机目录" }
]
}
]
import MyTree from './components/Tree' //引入我们写好的递归组件
export default {
components: {
MyTree
},
data() {
return {
data: treeData
}
}
}
</script>
这样一个简单的属性目录就生成了 递归组件还有很多种用法 这个比较简单的一种运用 利用递归组件来实现现树形目录