vue tree 递归

Vue 中使用递归组件实现树形结构的渲染可以按照以下步骤进行操作：

1. 定义一个递归组件，该组件的模板中包含组件自身，以及用于展示节点内容的 HTML 元素，代码如下：

<template>
  <div>
    <div>{{ node.name }}</div>
    <ul>
      <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node>
    </ul>
  </div>
</template>

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

该组件的模板中，首先展示当前节点的内容（在本例中为一个 `div`），然后使用 `v-for` 遍历当前节点的子节点，对于每个子节点，使用递归组件 `tree-node` 递归地渲染整个子树，并传入子节点的数据作为 `node` 属性。

2. 在父组件中使用递归组件 `tree-node` 渲染整个树，代码如下：

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

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

  export default {
    name: 'tree',
    components: {
      'tree-node': TreeNode
    },
    data() {
      return {
        treeData: {
          name: '根节点',
          children: [
            {
              name: '子节点1',
              children: [
                {
                  name: '子节点1-1',
                  children: []
                },
                {
                  name: '子节点1-2',
                  children: []
                }
              ]
            },
            {
              name: '子节点2',
              children: [
                {
                  name: '子节点2-1',
                  children: []
                },
                {
                  name: '子节点2-2',
                  children: []
                }
              ]
            }
          ]
        }
      }
    }
  }
</script>

在父组件的模板中，使用递归组件 `tree-node` 渲染整个树，将根节点的数据传入 `tree-node` 组件的 `node` 属性中。

在本例中，树的数据是一个包含根节点和子节点的对象，每个节点包含一个 `name` 属性和一个 `children` 属性，`children` 属性是一个数组，表示当前节点的子节点。