vue+ts 通过 ref 获取子组件实例

shengjon

已于 2022-11-27 18:40:30 修改

阅读量1.3k

点赞数

分类专栏： typeScript 文章标签： vue.js typescript vue3.x ref

于 2022-11-27 18:39:01 首次发布

本文链接：https://blog.csdn.net/shengjon/article/details/128067399

版权

typeScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何通过`defineExpose`和`InstanceType`实现父子组件之间的通信。首先，使用`defineExpose`暴露子组件内的方法，如`handleClick`，以便外部访问。然后在父组件中，通过引用类型`ref`并指定子组件的API接口或完整实例类型来调用子组件的方法。这种通信方式在单文件组件中尤其有用，确保了组件间的交互安全和可控。

摘要由CSDN通过智能技术生成

第一种：自定义类型

通过 defineExpose 暴露子组件中的属性或方法
使用 <script setup> 的组件默认是关闭的，无法被其他组件获取该组件内部的各种属性，比如通过 $parent 和 ref
如果可以是外部访问到，需要使用 defineExpose 暴露出去想要被外部访问的属性或方法
- 这里定义了一个方法 handleClick ，并暴露出去
- 然后定义一个 API 类型，里面是暴露出去的 handleClick

// 子组件
<script setup lang="ts">
	// 然后定义一个 API 类型，里面是暴露出去的 handleClick
	export interface API {
	  handleClick: () => void
	}
	// 这里定义了一个方法 handleClick ，并暴露出去
	defineExpose({
	  handleClick
	})
	let handleClick = (): void => {
	  console.log('触发了.....')
	}
</script>

父组件引入子组件暴露出来的类型，并定义 ref

<template>
	<HelloWorld msg="You did it!" ref="hellworld" />
</template>

<script setup lang="ts">
	// 引入子组件，并导入子组件暴露出来的 API 属性
	import HelloWorld, { type API as childAPI } from './components/HelloWorld.vue'
	import { ref } from 'vue'
	// 定义类型
	const hellworld = ref<null | childAPI>(null)
	const handleClick = () => {
		// 这里可以访问到 handleClick 
	  	hellworld.value?.handleClick()
	}
</script>

第二种：使用 InstanceType

InstanceType<T> 是 ts 自带的类型，能够直接获取组件完整的实例类型

<script setup lang="ts">'
	import HelloWorld from './components/HelloWorld.vue'
	import { ref } from 'vue'
	
	const hellworld = ref<null | InstanceType<typeof HelloWorld>>(null)
	// 这里可以访问到 handleClick
	const handleClick = () => {
	  hellworld.value?.handleClick()
	}
</script>