vue3 结合 TS 中 使用vant中TreeSelect 分类选择组件

在 Vue 3 结合 TypeScript (TS) 的项目中，使用 Vant 的 TreeSelect 组件作为分类选择是非常常见的。Vant 提供了一个名为 vant-tree-select 的轻量级 Tree 控件，它允许用户通过树形结构进行多级选择。

以下是基本步骤：

1. **安装依赖**:
首先，在你的 `package.json` 文件中通过 `npm install vant vant-ts` 或者 `yarn add vant vant-ts` 安装 Vant 和 TypeScript 插件支持。

2. **导入组件并配置类型**:
在你的 TypeScript 文件中，引入 `Vue`, `van-tree-select` 并为其指定类型注解：

   import { DefineComponent, Prop } from 'vue';
   import { TreeSelect, TreeNode } from 'vant';

   // 声明 TreeSelect 组件类型
   declare module '@vant/tree-select' {
     export interface VantTreeSelect extends DefineComponent<any, any, any> {}
   }

3. **在模板中使用组件**:
在 Vue 模板上，像普通组件一样使用 `van-tree-select`，并且可以给 props 类型化：

   <template>
     <van-tree-select v-model="selectedValue" :options="treeData" />
   </template>

   <!-- 在 typescript 中定义 selectedValue 和 treeData -->
   <script lang="ts">
   import { Component, Prop } from 'vue';

   export default defineComponent({
     setup(props) {
       const selectedValue: any = ref(null); // 假设值默认为空
       const treeData: TreeNode[] = [
         // 初始化树数据...
       ];

       return { selectedValue, treeData };
     },
   });
   </script>

4. **处理事件**:
Vant 的 TreeSelect 会触发 `on-change` 事件当选择发生改变，可以在事件处理器中获取选中的值：

   <script lang="ts">
   onMounted(() => {
     this.$on('van.tree.select.change', (value: TreeNode | string) => {
       console.log('选择改变:', value);
       this.selectedValue.value = value; // 更新 prop
     });
   });
   </script>

5. **验证和类型安全**:
利用 TypeScript 的强大特性，你可以编写更具针对性的函数和接口，确保数据的类型正确。例如，如果你需要确保 `treeData` 只包含 TreeNode 类型的数据，可以在定义时进行类型检查。