vue递归实现自定义tree组件

我会尽量详细地讲解“vue递归实现自定义tree组件”的完整攻略，并提供两条示例说明。

什么是递归组件

在VueJS中，组件可以递归其自身，允许我们在使用组件的时候，动态地将其渲染到其自身的子组件中。这种组件被称为递归组件。

递归组件可以非常方便地实现树形结构的展示。

实现递归tree组件

在实现递归tree组件之前，需要先确定tree的数据结构，我们可以使用以下的结构：

{
    label: 'Node1',
    children: [
        {
            label: 'Node1.1',
            children: [
                {
                    label: 'Node1.1.1'
                },
                {
                    label: 'Node1.1.2'
                }
            ]
        },
        {
            label: 'Node1.2'
        }
    ]
}

树形组件主要分为节点和树两部分，树部分渲染所有的节点，节点部分根据节点嵌套的层数生成不同的缩进，需要使用递归渲染。

实现过程如下:

<template>
  <div>
    <ul>
      <tree-node :node="treeData"></tree-node>
    </ul>
  </div>
</template>

<scrip>
  import TreeNode from './TreeNode.vue';

  export default {
    components: {
      TreeNode
    },
    data() {
      return {
        treeData: {
          label: 'Node1',
          children: [
            {
              label: 'Node1.1',
              children: [
                {
                  label: 'Node1.1.1'
                },
                {
                  label: 'Node1.1.2'
                }
              ]
            },
            {
              label: 'Node1.2'
            }
          ]
        }
      }
    }
  }
</scrip>

在这个例子中，我们在树形组件里面递归引用了该组件，以此来构造一个树形结构。

同时，该组件需要定义props传入节点的信息作为参数：

<template>
  <li>
    <div>{{ node.label }}</div>
    <ul>
      <tree-node
        v-if="node.children"
        v-for="(childNode, index) in node.children"         :key="index" :node="childNode"></tree-node>
    </ul>
  </li>
</template>

<script>
  export default {
    name: 'TreeNode',
    props: {
      node: Object
    },
    components: {
      TreeNode
    }
  }
</script>

递归的关键部分在于<tree-node>组件的使用，当它在自己的模板中被递归调用时，我们可以将node的children传入来循环地遍历它的子节点，并在递归结束时，再次调用另一个的<tree-node>组件，以继续遍历下一级节点。

这就是递归调用组件的本质。如果树的层数很深，还需要用到CSS样式来渲染这些节点。