优雅的使用组件自调用实现树形结构

在日常开发中，树形结构几乎是所有前端开发工程师都会写的组件，但是如何才能让自己的树形结构变得优雅，变得永生，而不是每次需要一级，都自己手动去加一部分代码。

1.数据结构整齐

听到这里是不是脑子里一下闪现出了，这不就是递归思想么，没错就是递归，但是我们平常说的递归，大部分使用实在函数中，做一个递归，要是组件坐递归的话，最树形结构的数据整齐度，有非常高的要求，必须保证每次传入组件的数据格式以及类型，还有属性是统一的。如下所示：

  let treeData = [
    {
      label:'富一代',
      value:0,
      children: [
        {
          label: '富二代A',
          value:01,
          children: [
            {
              label:'富三代a',
              value:001,
              children: [
                ...
              ]
            }
          ]
        }
      ]
    }
  ]

好了话不多说，数据的问题解决了，下面我们来看dom结构的规划

2.DOM层的设计

我们所说的递归也就是要在DOM层这里来体现，我们需要写一个组件然后让组件在某一条件下自己调用自己本身，从而达到数据操作DOM生生不息的状态。代码如下：

  <template>
  <div class="treeWrap">
    <div class="tree" v-for="(item, index) of treeData" :key="index">
      {{item.label}}
      <tree v-if = "item.children.length > 0" :treeData = "item.children"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tree',
  props: ['treeData']
};
</script>

<style>

</style>

以上就是实现了换一个优雅的树形结构的组件的编写，利用Vue的name属性来调用自身判断拥有子节点时再创建一个自己把子节点的数据填充进去。