最近在开发一个小模块，碰到了这么一个需求： 在一个页面中显示一级分类，当一级分类有子类的话，点开一级分类，展现二级分类，假设二级分类中的个别某一项有属于他的子分类的时候，点开他，继续显示它的子分类。上面所说的每级分类中，子分类数目可能是一项或者多项，数目不固定，具体看返回来的数据有多少。
我擦嘞，这个不就是递归么。。。。。。然而，在vue中，官方是不推荐直接操作dom树的，因为这样会非常损耗性能。。。。这样一来，直接操作dom树这个想法就只能丢弃了。。。这可如何是好呢？于是，我就开始度娘了。。。。然后度到在官网里有递归组件这么一回事，但也仅限于介绍，其它特么的什么也木有，但是说了最重要的一点，一定要有name属性，因为这个name属性指代的就是组件本身。。。然后我就接着找啊找啊，找到了一篇不错的博文，具体链接地址: https://www.cnblogs.com/ychl/p/6075106.html 。不错的一篇文章，不过个人感觉可以再细化点，于是经过博主同意，进行二次个人解读。 有朋友就纳闷了:你咋那么懒。。。。我想说，一切为了项目，这可不是个人业余学习时间，我也是现在有点时间，怕以后忘记了，赶紧记起来，避免以后掉链子。
我们上面说到了，我们的递归应该是按照数据来的。废话，你如果没有子类，你递归的毛线啊，所以，一切以数据为准。请看下面的一些列数据，来自于隔壁家的老黄的 文章 ： https://www.cnblogs.com/ychl/p/6075106.htmlvuejs学习--递归组件(树型表格分享)
vardata = [{
"id": "1",
"data": {
"menuName": "项目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"menuName": "项目",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "我的任务",
"menuCode": "BusProject", },
"childTreeNode": []
}, {
"data": {
"menuName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}]
}, {
"id": "2",
"data": {
"menuName": "数据统计",
"menuCode": "BusClock",
},
"childTreeNode": []
}, {
"id": "3",
"data": {
"menuName": "人事管理",
"menuCode": "",
},
"childTreeNode": []
}, {
"id": "4",
"data": {
"menuName": "基础管理",
"menuCode": "",
},
"childTreeNode": []
}]
朋友们上面看到了，数据data是一个数组，数组里面有好几项数据，所以我们第一步想到的是用 v-for这个指令，将数据一个个都给for出来，于是咱们说干就干。
大家对于上面的这个代码应该多少能看懂，我觉得唯一有疑问的应该是 为啥v-for 仍在了 ul 这个标签上了呢。这里我这么解释。我们的数组中(拿一级的举例你就懂了)，每个数据都是一项，然而这每一项我们不知道它到底是有子分类的还是没有子分类的，这个不是我们说了算，而是通过接口获取到的数据说了算。那么，这一项到底有没有子分类就无法判断。这样的话，我们的每一项应该都是一个ul。
我们这么分析，假设我们的分类没有子项，那么属于它的那个ul中的第一个li只要显示它对应的数据就好啦，就像下面
{{model.data.menuName}}
这是不是很简单呀
情况二，假设我们循环到的那一项有子类，也就是对象中的childTreeNode有数据，那么这个时候，我们是不是就应该把这些数据 '递归出来' 了呢，并且递归在属于它的那一级菜单下面。重点来了，这可怎么把它递归出来呢？
思路：我们应该有第二个列表项，专门用于判断它的childNodes中有没有对应的数据，假设没有，啥也不做，这点毋庸置疑。假设有，那么想办法，自己调用自己，把childNodes属性中的数据重新传入我们的组件当中，让它根据新的数据遍历出来！！！
文字太潦草，我画了张图
子类属性child变成了childTreeNode，data变成dataList什么的不要去纠结，都是一样的东西，只是变名称而已，请重点看我的红线以及我标注的文字。
image
在图中你们可以看到，有个tree组件，他就是我们的递归组件了。你随便瞟一眼，有没有发现很简单，不就是我上面说的那个东西吗。然而你可能发现了，我在父组件teamoutput中引用了它，并且将数据传到了他的model属性。
*****在显示完对应数据之后，下面又有个ul标签，并且这个ul标签，把我们对应的childTreeNode属性中的数据，给传进去了。更加重要的是，这个组件items就是组件tree本身，也就是说，我们在这里自己调用了自己，也就是递归了。我们是随便去递归的么？当然不是。我们在决定递归之前，先去用计算属性去判断了childTreeNode属性是否有子类数据，当它有的时候，我们踩决定将数据传入，实现递归，不然的画，它的v-if是false，那么就不会显示。
讲到这里，我相信各位心里都有点BS了吧。
希望我的讲解对你有帮助。
网友评论