1.3 KiB
1.3 KiB
title, date, lastmod, tags
| title | date | lastmod | tags | ||||
|---|---|---|---|---|---|---|---|
| 「Web 前端」Vue 为组件模板引用标注类型 | 2025-03-09T22:30:29Z | 2025-10-12T18:27:37Z |
|
「Web 前端」Vue 为组件模板引用标注类型
参考资料
操作方式
为了获取 MyModal 的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型：
<script setup lang="ts">
import MyModal from './MyModal.vue'
const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {
modal.value?.open()
}
</script>
注意，如果你想在 TypeScript 文件而不是在 Vue SFC 中使用这种技巧，需要开启 Volar 的 Takeover 模式。
如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 ComponentPublicInstance。这只会包含所有组件都共享的属性，比如 $el。
<script setup lang="ts">
import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'
const child = ref<ComponentPublicInstance | null>(null)
</script>