在做我的项目中，会遇到一些树形的数据结构，罕用在左侧菜单导航，或者评论援用等中央，这种数据结构有个特点是不晓得它会嵌套多少层，所以用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的数据，子组件如下：

<template><div>  <div class="demo">    {{treeData.value}}    <tree-comp v-for="(item, index) in treeData.children" :treeData="item"></tree-comp>  </div></div></template><script>export default {  name: 'treeComp',  props:{    treeData: {      default: function(){        return {}      }    }  },  mounted(){},  methods:{}}</script><style lang="less" scoped>  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;    &:before{content:'--';display: inline-block;padding:0 4px;}  }</style>

而后创立父组件，父组件应用子组件，并将数据传入子组件。

<template>  <tree-comp :treeData="mainData"></tree-comp></template><script>export default {  name: 'treeMain',  data () {    return {      mainData: {        value: "root",        children:[          {            value: "层级1-1",            children:[{              value: "层级2-1",              children:[{                value: "层级3-1",                children:[]              }]            },{              value: "层级2-2",              children:[]            }]          },{            value: "层级1-2",            children:[]          }        ]      }    }  },  components:{    "tree-comp": () =>  import('./TreeComp')  },  mounted(){},  methods:{}}</script>

对于递归组件的内容，在官网文档里是有提到的-->递归组件

应用render办法

除了应用组件的形式，也能够应用vue的render办法，去利用JavaScript 的齐全编程的能力，实现递归解决树形数据，从而展现出有限层级树。如下：

<template>  <tree-comp :treeData="mainData"></tree-comp></template><script>export default {  name: 'treeRender',  data () {    return {      mainData: {        value: "root",        children:[          {            value: "层级1-1",            children:[{              value: "层级2-1",              children:[{                value: "层级3-1",                children:[]              }]            },{              value: "层级2-2",              children:[]            }]          },{            value: "层级1-2",            children:[]          }        ]      }    }  },  components:{    treeComp:{      functional: true,      props: {treeData: Object},      render(h, {props: {treeData = {}}}) {        const creatNode = (node)=>{          if(node.children && node.children.length > 0){            let hArr = node.children.map(item=>{              return creatNode(item)            })            return h('div', {class:'demo'}, [node.value, hArr])          }else{            return h('div', {class:'demo'}, [node.value])          }                  }        return creatNode(treeData)      },    }  },  mounted(){},  methods:{}}</script><style lang="less" scoped>  .demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;    &:before{content:'--';display: inline-block;padding:0 4px;}  }</style>

其中最外围的就是在render办法里，creatNode办法用递归的形式，深度优先遍历树状数据，生成vnode，而后渲染出了页面。