实现一个vue3树组件

好的，下面是一个简单的 Vue 3 树组件实现：

<template>
  <ul>
    <li v-for="node in tree" :key="node.id">
      <span @click="toggle(node)">
        {{ node.name }}
        <i v-if="node.children" :class="iconClasses(node)"></i>
      </span>
      <Tree v-if="node.expanded" :tree="node.children" @update="updateTree" />
    </li>
  </ul>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    tree: {
      type: Array,
      required: true,
    },
  },
  emits: ['update'],
  methods: {
    toggle(node) {
      if (node.children) {
        node.expanded = !node.expanded;
        this.$emit('update', this.tree);
      }
    },
    updateTree(tree) {
      this.$emit('update', tree);
    },
    iconClasses(node) {
      return {
        'icon-plus': !node.expanded,
        'icon-minus': node.expanded,
      };
    },
  },
});
</script>

这个组件使用递归的方式来渲染树形结构。它接受一个名为 `tree` 的数组作为输入，并递归渲染每个节点。每个节点都包含一个 `name` 属性和一个可选的 `children` 属性。如果某个节点具有子节点，它将显示一个可单击的图标以展开或折叠子节点。

该组件还包含一个 `update` 事件，每当用户展开或折叠一个节点时都会触发该事件。父组件可以监听此事件来更新其树状态。

当然，这个组件只是一个简单的示例，您可以根据自己的需求进行修改和扩展。