vue递归组件实现树形结构

要实现树形结构，可以使用递归组件的方式，其中递归组件指的是自己调用自己的组件。

下面是实现树形结构的完整攻略：

1. 数据准备

首先需要准备好数据，至少需要有以下两个属性：

• id：唯一标识符，用来标识每一个节点；
• children：一个数组，包含当前节点下的子节点。

这样每个节点就可以像一个树一样组织起来。

示例数据如下：

const data = {
  id: 1,
  name: '根节点',
  children: [
    {
      id: 2,
      name: '节点 1-1',
      children: []
    },
    {
      id: 3,
      name: '节点 1-2',
      children: [
        {
          id: 4,
          name: '节点 1-2-1',
          children: []
        },
        {
          id: 5,
          name: '节点 1-2-2',
          children: []
        }
      ]
    }
  ]
};

2. 定义递归组件

接下来需要定义递归组件，组件中需要完成以下操作：

• 遍历数据，将每个节点渲染为列表项；
• 对于有子节点的节点，使用递归组件来渲染子节点。

示例代码如下：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.name }}
      <tree-item :data="item.children" v-if="item.children"/>
    </li>
  </ul>
</template>

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

export default {
  name: 'TreeItem',
  components: {
    TreeItem,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
};
</script>

从上面的代码可以看到，递归组件中使用了一个名为 TreeItem 的子组件来递归渲染子节点。同时，如果当前节点没有子节点，则不会渲染子组件。

3. 定义子组件

子组件 TreeItem 在递归组件中起到递归渲染的作用，它的模板中需要嵌套递归组件本身。

示例代码如下：

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.name }}
      <tree-item :data="item.children" v-if="item.children"/>
    </li>
  </ul>
</template>

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

export default {
  name: 'TreeItem',
  components: {
    TreeItem,
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
};
</script>

从上面的代码中可以看到，子组件的模板中使用了递归调用 TreeItem 组件的方式来渲染子节点，如果当前节点没有子节点，则不会继续递归渲染。

4. 在页面中使用组件

最后，在页面中使用组件，将数据传递给递归组件即可实现树形结构的效果。

以下是一个简单的页面示例：

<template>
  <div id="app">
    <tree-item :data="data" />
  </div>
</template>

<script>
import TreeItem from './components/TreeItem.vue';

export default {
  components: {
    TreeItem,
  },
  data() {
    return {
      data: {
        id: 1,
        name: '根节点',
        children: [
          {
            id: 2,
            name: '节点 1-1',
            children: []
          },
          {
            id: 3,
            name: '节点 1-2',
            children: [
              {
                id: 4,
                name: '节点 1-2-1',
                children: []
              },
              {
                id: 5,
                name: '节点 1-2-2',
                children: []
              }
            ]
          }
        ]
      }
    };
  },
};
</script>

上面的代码中，使用了 tree-item 组件来渲染数据，并将数据作为 props 传递给组件。