vue3+ts实现树形菜单

好的，下面是一个简单的示例代码：

// TreeItem.ts
interface TreeItem {
  id: number;
  label: string;
  children?: TreeItem[];
}

// Tree.vue
<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <span>{{ item.label }}</span>
      <tree v-if="item.children" :treeData="item.children" />
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TreeItem from './TreeItem';

export default defineComponent({
  name: 'Tree',
  props: {
    treeData: {
      type: Array as () => TreeItem[],
      required: true,
    },
  },
});
</script>

上述代码定义了一个 `TreeItem` 接口来描述树形结构中每个节点的数据结构，然后在 `Tree.vue` 中使用递归组件的方式渲染树形菜单。

注意，在 `script` 标签中使用了 `defineComponent` 函数来定义组件，这是 Vue 3 中推荐的方式。同时，我们将 `props` 中的 `treeData` 声明为必需的，并指定了其类型为 `TreeItem[]`，即一个 `TreeItem` 类型的数组。这样做可以让 TypeScript 在编译时检查我们的代码，避免一些类型错误。