vue3中组件ref的ts类型

下面案例是一个父组件获取子组件暴露的数据,需要用到ref
父组件:

	<template>
 		<Search ref="searchRef" @search="handleSearch"></Search>
 		<el-button @click="getData">获取子组件暴露的数据</el-button>	
 	</template>
 	<script lang="ts" setup>
 		import Search from './component/search.vue'
 		const searchRef = ref<any>(null)
		const getData = ()=>{
    
    
			console.log(searchRef.value?.queryData)
		}
 	</script>

子组件:

	<template>
 		<div>{
    
    {
    
     queryData.name }}</div>
 	</template>
 	<script lang="ts" setup>
 		const queryData = reative({
    
    
 			name:'tt'
 		})
 		defineExpose({
    
    
		    queryData
		})
 	</script>

这么写也是没问题(反正any大法,不报错),有一天实在想规范申明下,找了下规范的写法:

	<template>
 		<Search ref="searchRef" @search="handleSearch"></Search>
 		<el-button @click="getData">获取子组件暴露的数据</el-button>	
 	</template>
 	<script lang="ts" setup>
 		import Search from './component/search.vue'
 		// 正确的写法:
 		const searchRef = ref<InstanceType<typeof Search> | null>(null)
		const getData = ()=>{
			console.log(searchRef.value?.queryData)
		}
 	</script>

猜你喜欢

转载自blog.csdn.net/xixihahakkyy/article/details/129040243