在做项⽬中，会遇到⼀些树形的数据结构，常⽤在左侧菜单导航，或者评论引⽤等地⽅，这种数据结构有个特点是不知道它会嵌套多少层，所以⽤template去展⽰这样的数据时就有点棘⼿，这篇⽂章梳理两种展⽰这种数据结构的⽅法。⽂章中⽤到的数据是下⾯这个：
mainData: { value: \"root\ children:[{
value: \"层级1-1\ children:[{
value: \"层级2-1\ children:[{
value: \"层级3-1\ children:[] }] },{
value: \"层级2-2\ children:[] }] },{
value: \"层级1-2\ children:[] }]}
也就是下⾯这个样⼦。
组件递归调⽤
第⼀种是组件递归调⽤⾃⼰的⽅式，创建⼀个组件，该组件在引⽤⾃⼰去展⽰children的数据，⼦组件如下：
然后创建⽗组件，⽗组件使⽤⼦组件，并将数据传⼊⼦组件。
关于递归组件的内容，在官⽅⽂档⾥是有提到的-->
使⽤render⽅法
除了使⽤组件的⽅式，也可以使⽤vue的render⽅法，去利⽤JavaScript 的完全编程的能⼒，实现递归处理树形数据，从⽽展⽰出⽆限层级树。如下：
其中最核⼼的就是在render⽅法⾥，creatNode⽅法⽤递归的⽅式，深度优先遍历树状数据，⽣成vnode，然后渲染出了页⾯。
因篇幅问题不能全部显示，请点此查看更多更全内容