vue3中组件ref的ts类型问题？

  • Z时代
  • 2024-03-06
  • 分类：IT

在vue3的组件中使用ref时ts定义组件的类型如下：
const pageContentRef = ref<InstanceType<typeof PageContent>>(),然后中某个函数中我需要传递这个pageContentRef作为为参数，目前我定义参数类型为function demo(pageContentRef: Ref<InstanceType<typeof PageContent>>){...},但是在传值过去ts报类型错误，不太明白，哪里的问题。错误信息：Argument of type 'Ref<({ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }) | undefined>' is not assignable to parameter of type 'Ref<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }>'.
Type '({ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }) | undefined' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ tableConfig: TableRenderType; searchWords: Record<string, any>; }> & Omit<...>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & { ...; }'.
仔细对比了下，一个多了Ref，不知道问题在哪？代码运行没问题，就报ts类型错误

回答：

试了下，可以通过如下方式定义类型

const pcRef = ref<InstanceType<typeof PageContent>>()
type pageContentRefType = typeof pcRef

回答：

官网的写法

<script setup lang="ts">
import MyModal from './MyModal.vue'
const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {
  modal.value?.open()
}
</script>

以上是 vue3中组件ref的ts类型问题？ 的全部内容， 来源链接： utcz.com/p/933019.html

回到顶部