使用unplugin-vue-components之后如何在ref中获取自动导入的组件类型？

作者站长头像
站长
· 阅读数 15

vue3使用了unplugin-vue-components引入elementplus组件后，如何在写ts的时候获取组件类型？使用unplugin-vue-components之后如何在ref中获取自动导入的组件类型？这个文件好像只对template里的组件才有提示，现在我需要获取组件的方法，let treeRef = ref() 使用ref之后，treeRef.value 不提示组件内部方法，然后我手动引入了el-tree组件，写成了let treeRef = ref<intanceType<typeof Eltree>>() 之后可以有提示，但是这样做就失去了使用unplugin-vue-components的意义，而且这样使用由于没全局导入样式，所以组件是没有样式的。

我尝试使用let treeRef = ref<GlobalComponents.ElTree>()不行，应该有一种方法可以获取到生成的component.d.ts里 GlobalComponents声明的全局组件类型。

回复
1个回答
avatar
test
2024-07-20

新建一个文件：

import type { GlobalComponents } from 'vue'

declare global {
  type ComponentInstance = {
    [Property in keyof GlobalComponents]: InstanceType<GlobalComponents[Property]>
  }
}

然后就可以使用：const treeRef = ref<ComponentInstance['ElTree']>()

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容