vue递归组件
作者：互联网
1、首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。
既然要用递归组件，那么对我们的数据格式肯定是需要满足递归的条件的。就像下边这样，这是一个树状的递归数据。
[
{
"name": "黄焖鸡米饭111111111",
cList: [
{ "name": "二级黄焖鸡" },
{
"name": "one chicken",
cList: [{ "name": '三级黄焖鸡3333', cList: [{ "name": "四级黄焖鸡" }] }]
}
]
},
{ "name": "2222222222" },
{
"name": "黄焖鸡米饭33333333", cList: [
{ "name": "二级黄焖鸡" },
{ "name": "one chicken" }
]
},
]
接下来，我们就用这个树状数据，做一个简单版的树状菜单。树状菜单，也是递归组件最常用的方法之一。
实践案例：
首先，我们先创建一个tree组件，这个组件作为使用递归组件的父组件，我们来看下具体写法
<template>
<div>
<my-trees :list="list"></my-trees>
</div>
</template>
<script>
import myTrees from './treeMenus'
export default {
components: {
myTrees
},
data () {
return {
list: [
{
name: '黄焖鸡米饭111111111',
cList: [
{ name: '二级黄焖鸡' },
{
name: 'one chicken',
cList: [
{ name: '三级黄焖鸡3333', cList: [{ name: '四级黄焖鸡' }] }
]
}
]
},
{ name: '2222222222' },
{
name: '黄焖鸡米饭33333333',
cList: [{ name: '二级黄焖鸡' }, { name: 'one chicken' }]
}
]
}
},
methods: {}
}
</script>
ok，可以看到，<my-trees />就是我们说的递归组件，当使用它时，只需要把上边我们定义好的数据通过props的方式传进去即可。
接下来，递归组件接收到了父组件传递的数据，就可以进行递归啦，我们来看下边的实现：
<template>
<ul>
<li v-for="(item,index) in list " :key="index">
<p>{{item.name}}</p>
<tree-menus :list="item.cList"></tree-menus>
</li>
</ul>
</template>
<style>
ul{
padding-left: 20px!important;
}
</style>
<script>
export default{
name:'treeMenus',
props:{
list: Array
}
}
</script>
注意本文开头所说，name属性的使用（你可以把它当作从import导入了一个组件并注册，我们在temlpate可以使用<tree-menus></tree-menus>使用子组件自身进行递归了）
总结：
通过props从父组件拿到数据，递归组件每次进行递归的时候都会tree-menus组件传递下一级cList数据，（大家可以想象一下整个过程），整个过程结束之后，递归也就完成了，当然，这段代码只是简单的做了下递归组件的使用。对于折叠树状菜单来说，我们一般只会去渲染一级的数据，当点击一级菜单时，再去渲染一级菜单下的结构，如此往复。那么v-if就可以实现我们的这个需求，当v-if设置为false时，递归组件将不会再进行渲染，设置为true时，继续渲染。
最后也为大家准备了一个树状折叠菜单的递归组件实现方式，没有样式大家不要介意啦～
<template>
<ul>
<li v-for="(item,index) in list" :key="index">
<p @click="changeStatus(index)">{{item.name}}</p>
<tree-menus v-if="scopesDefault[index]" :list="item.cList"></tree-menus>
</li>
</ul>
</template>
<style>
ul {
margin-top: 50px;
padding-left: 20px !important;
}
</style>
<script>
// import treeMenus from './treeMenu2.vue'
export default {
name: 'treeMenus',
props: {
list: Array
},
data() {
return {
scopesDefault: [],
scopes: []
}
},
methods: {
changeStatus(index) {
console.log(index);
if (this.scopesDefault[index] == true) {
this.$set(this.scopesDefault, index, false)
} else {
this.$set(this.scopesDefault, index, this.scopes[index])
}
},
scope() {
this.list.forEach((item, index) => {
this.scopesDefault[index] = false
if ('cList' in item) {
this.scopes[index] = true
console.log(item, index)
} else {
this.scopes[index] = false
}
})
console.log(this.scopesDefault)
}
},
created() {
this.scope()
}
}
</script>
标签：index,vue,name,递归,黄焖,cList,组件 来源： https://blog.csdn.net/weixin_43837268/article/details/95209458