vue3获取ref实例结合ts的InstanceType
有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~const sayHello = () => (console.log('我会说hello'))sayHello})然后我们在父级使用,输入完成会发现没有sayHello这个函数提示,所以这个时候我们就需要使用工具类型来获取其实例类型
·
前言
- 有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过
defineExpose
暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const sayHello = () => (console.log('我会说hello'))
defineExpose({
sayHello
})
</script>
- 然后我们在父级使用,输入完成
MyModalRef.value
会发现没有sayHello
这个函数提示,所以这个时候我们就需要使用InstanceType
工具类型来获取其实例类型
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const MyModalRef = ref()
const handleOperation = () => {
MyModalRef.value.sayHello
}
</script>
使用InstanceType 工具类型获取其实例类型:
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'
const sayHello = () => (console.log('我会说hello'))
defineExpose({
open
})
</script>
父级使用
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const MyModalRef = ref<InstanceType<typeof MyModal> | null>(null)
const handleOperation = () => {
MyModalRef.value?.sayHello()
}
</script>
后言
- 貌似依旧没有提示使用
InstanceType
在提示的时候,然后输入错误内容也没有在编译前进行报错…,不过vue官方这样子说了,那就听他的吧(其实我一般不用,不过也学到了) - @vue官方API为组件模板引用标注类型
更多推荐
已为社区贡献7条内容
所有评论(0)