vue3+ts获取第三方组件内类型并在ref中使用

前言

最近在将项目从vue2重构至vue3+ts,在其中遇到了很多的坑，这篇文章讲一下如何获取第三方组件的类型，并结合 ref api来获取子组件的节点数据

代码实现

首先讲一下vue3.x版本composition-api,要实现和vue2中$ref获取元素节点的方法，我们使用elementUI中的组件来举例

在vue2版本中获取方式如下

<template>
  <el-tree ref="treeRef" >
  </el-tree>
</template>

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

在vue3版本中获取方式如下

<template>
  <el-tree ref="treeRef" >
  </el-tree>
</template>

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

但是当我们使用ts的时候，为了获取ref的类型，就必须要在ref的泛型中传入一个类型，那么我们要如何获取 el-tree 组件中的类型呢？

其实在vue的官方文档中Typescript支持里有告诉我们一个获取组件类型的方法，InstanceType<typeof 组件名称> ，使用方式如下代码

<template>
  <el-tree ref="treeRef" >
  </el-tree>
</template>

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

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

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

<template>
  <el-tree ref="treeRef" >
  </el-tree>
</template>

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

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

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

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

//index.vue
<template>
  <el-tree ref="treeRef" >
  </el-tree>
</template>

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

总结

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