vue 写一个树形组件

以下是一个简单的树形组件，使用了 Vue 组件的嵌套和递归渲染。

template:

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      {{ node.name }}
      <Tree v-if="node.children" :nodes="node.children"></Tree>
    </li>
  </ul>
</template>

script:

<script>
export default {
  name: "Tree",
  props: {
    nodes: {
      type: Array,
      required: true,
    },
  },
};
</script>

在这个组件中，我们使用了 `props` 来接收一个名为 `nodes` 的数组，其中每个元素都是一个包含 `name` 和 `children` 属性的对象。如果某个节点有子节点，我们就递归渲染一个新的 `Tree` 组件，直到没有子节点为止。

使用该组件的示例：

<template>
  <div>
    <h2>Tree Component Example</h2>
    <Tree :nodes="nodes"></Tree>
  </div>
</template>

<script>
import Tree from "./Tree.vue";

export default {
  name: "App",
  components: {
    Tree,
  },
  data() {
    return {
      nodes: [
        {
          id: 1,
          name: "Node 1",
          children: [
            {
              id: 2,
              name: "Node 1.1",
              children: [
                {
                  id: 3,
                  name: "Node 1.1.1",
                },
                {
                  id: 4,
                  name: "Node 1.1.2",
                },
              ],
            },
            {
              id: 5,
              name: "Node 1.2",
            },
          ],
        },
        {
          id: 6,
          name: "Node 2",
          children: [
            {
              id: 7,
              name: "Node 2.1",
            },
            {
              id: 8,
              name: "Node 2.2",
            },
          ],
        },
      ],
    };
  },
};
</script>

在这个示例中，我们创建了一个名为 `App` 的组件，并在其中使用了我们刚刚创建的 `Tree` 组件。我们在 `data` 中定义了一个 `nodes` 数组，其中包含了我们要渲染的树形结构的数据。