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大法,不报错),有一天实在想规范申明下,找了下规范的写法:

	
 	

你可能感兴趣的:(Vue3,javascript,vue.js,前端)