vue3 ts 如何让子组件通过 defineExpose 暴露的方法有代码提示
有时,你可能需要为一个子组件添加一个模板引用,以便调用它公开的方法。得到其类型,再使用 TypeScript 内置的。的类型,我们首先需要通过。
·
有时,你可能需要为一个子组件添加一个模板引用,以便调用它公开的方法。举例来说,我们有一个 Child 子组件,它有一个打开模态框的方法:
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const isContentShown = ref(false)
const open = () => (isContentShown.value = true)
defineExpose({
open
})
</script>
为了获取
MyModal
的类型,我们首先需要通过typeof
得到其类型,再使用 TypeScript 内置的InstanceType
工具类型来获取其实例类型:
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {
modal.value?.open()
}
</script>
官网跳转 Vue官方文档
更多推荐
已为社区贡献3条内容
所有评论(0)