Vue|vue3+ts获取第三方组件内类型并在ref中使用 javascript|ts|typescript|vue.js

前言最近在将项目从vue2重构至vue3+ts,在其中遇到了很多的坑，这篇文章讲一下如何获取第三方组件的类型，并结合 ref api来获取子组件的节点数据
代码实现首先讲一下vue3.x版本composition-api,要实现和vue2中$ref获取元素节点的方法，我们使用elementUI中的组件来举例
在vue2版本中获取方式如下

> export default { mounted() {console.log( this.$refs.treeRef ) }, }

在vue3版本中获取方式如下

setup > import { ElTree} from "element-plus" import { ref, onMounted} from "vue" const treeRef = ref() onMounted(()=>{console.log( treeRef ) })

但是当我们使用ts的时候，为了获取ref的类型，就必须要在ref的泛型中传入一个类型，那么我们要如何获取 el-tree 组件中的类型呢？
其实在vue的官方文档中Typescript支持里有告诉我们一个获取组件类型的方法，InstanceType ，使用方式如下代码

setup > import { ElTree} from "element-plus" import { ref, onMounted} from "vue" const treeRef = ref>() onMounted(()=>{console.log( treeRef ) treeRef.value?.filter() })

请注意你还需要使用可选链操作符或其它方式来确认 modal.value 不是 undefined。

当然在实际开发中还会遇到更多问题，如果我们想要为treeRef.value中属性的赋值时，这时候可选链操作符是不能使用的，赋值表达式的左侧不能是可选属性访问，因此我们要修改一下使用的方式，将组件的类型单出抽离出去，在赋值操作的时候使用类型断言，如下代码

setup > import { ElTree} from "element-plus" import { ref, onMounted} from "vue" type TreeType = InstanceType const treeRef = ref() onMounted(()=>{(treeRef.value as TreeType).store.nodesMap[0].expanded = true })

【Vue|vue3+ts获取第三方组件内类型并在ref中使用】以上只是一个非常简单的实现，但是当我们想要将ref值作为一个参数传递到函数中要怎么做呢，这时候我们需要用到vue中的Ref类型,例如我们需要写一个hook，我们可以将组件的类型单独写在一个type.ts的文件中以复用，如下代码

//type.ts import { ElTree } from "element-plus" export type TreeType = InstanceType

//useAdd.ts import { Ref } from "vue-demi" import { TreeType } from "../type" function useAdd(treeRef:Ref){ const a = 1 //...do something return { a} } export default useAdd

//index.vue > import { ElTree} from "element-plus" import { ref, onMounted} from "vue" type TreeType = InstanceType const treeRef = ref() import useAdd from "./useAdd" const { a} = useAdd(treeRef)

总结以上其实都是使用ts开发vue必须掌握的基础知识，只是在文档不太清晰的情况下遇到坑可能要解决很久，希望以上内容对你有所帮助！最近也在写一个开源项目，期间会产出很多相关内容，欢迎关注！