前言

  • 有时候我们模板引用,但是在使用的时候,ts提示却不行,没有提示组件通过defineExpose暴露的方法名称,虽然这不是很影响,但是可以解决还是可以解决下~
1
2
3
4
5
6
7
8
9
10
11
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const sayHello = () => (console.log('我会说hello'))

defineExpose({
sayHello
})
</script>

  • 然后我们在父级使用,输入完成MyModalRef.value会发现没有sayHello这个函数提示,所以这个时候我们就需要使用InstanceType 工具类型来获取其实例类型
1
2
3
4
5
6
7
8
9
10
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const MyModalRef = ref()

const handleOperation = () => {
MyModalRef.value.sayHello
}
</script>

使用InstanceType 工具类型获取其实例类型:

1
2
3
4
5
6
7
8
9
10
11
<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const sayHello = () => (console.log('我会说hello'))

defineExpose({
open
})
</script>

父级使用

1
2
3
4
5
6
7
8
9
10
<!-- 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为组件模板引用标注类型