vue3+ts实现树形菜单
时间: 2023-07-25 08:41:15 浏览: 105
好的,下面是一个简单的示例代码:
```typescript
// 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 在编译时检查我们的代码,避免一些类型错误。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)