Vue组件递归——组件开发必备技能！

.tree-item{.item-title{填充：4px8px;}.item-childen{padding-left:20px;}}不知道大家有没有遇到过这样的场景：在渲染列表数据的时候，列表的子项还是列表。如果关卡少的话，用几个for循环就可以搞定，但是如果关卡很多或者关卡不确定，就有点难下手了。其实这是树形结构的数据，比如常见的组织结构图、文件夹目录、导航菜单等都属于这种结构。很多组件库都有树形组件，但往往样式不是我们想要的，改起来很费力。那么，您如何自己渲染这些数据呢？答案是——组件递归！效果展示上面是使用组件递归，加上一个简单的交互展示效果。点击一个节点会在控制台输出该节点对应的数据，如果有子节点，会展开或收起子节点。接下来我们就看看如何实现上面的效果吧！渲染完整数据渲染数据的步骤非常简单。首先将树结构封装成列表组件，然后判断每一项是否有子节点。如果有子节点，则使用自己的组件进行渲染。src/components/myTree.vue.tree-item{.item-title{填充：4px8px;}.item-childen{padding-left:20px;}}src/App.vue效果如下得到节点数据接下来我们要做的就是，点击输出节点时控制台上的相应数据。首先，我们使用$emit将一级节点的item传递出去，也就是传子给父的方法。相信大家都会知道。第二种是传递内层节点的数据，也是采用传子传父的方式，但是我们需要在组件中绑定my-tree@node-click="$emit('node-click',$event)"，这样子每次都能调用parent的node-click方法，parent调用它parent的node-click方法，最后调用最外层的node-click方法。我们只需要在这个过程中，将数据传递过来即可。这块有点绕，相信大家多看几遍应该就能明白了。修改如下：src/components/myTree.vue{{item.name}}