初学vue3与ts:获取组件ref实例

typescript 复制代码
/**
 * 获取组件ref
 * @param {VueComponentIns} 组件实例
 * @returns 组件ref
 */
// eslint-disable-next-line
export function useCompRef<T extends abstract new (...args: any) => any>(_: T) {
	return ref<InstanceType<T>>();
}

使用

html 复制代码
<a-com ref="aComRef"></a-com>
<script lang="ts" setup>
import ACom from '@/components/a-com.vue';
//引入
import { useCompRef } from '@/sss/useRefs';
const aComRef = useCompRef(ACom);
//调用组件里的函数,比如说这个组件是一个弹窗,那么打开弹窗
const openCom = () => {
	aComRef.value?.open();
};
</script>
相关推荐
贼爱学习的小黄18 分钟前
NC BIP参照开发
java·前端·nc
weixin_4629019718 分钟前
ESP32 LED控制代码解析
javascript
小江的记录本22 分钟前
【MyBatis-Plus】MyBatis-Plus的核心特性、条件构造器、分页插件、乐观锁插件
java·前端·spring boot·后端·sql·tomcat·mybatis
小张会进步23 分钟前
数组:二维数组
java·javascript·算法
光影少年27 分钟前
如何进行前端性能优化?
前端·性能优化
Dxy123931021633 分钟前
js如何把字符串转数字
开发语言·前端·javascript
爱写bug的野原新之助42 分钟前
爬虫之补环境:加载原型链
前端·javascript·爬虫
陈广亮1 小时前
工具指南7-Unix时间戳转换工具
前端
NGBQ121381 小时前
Adobe-Premiere-Pro-2026-26.0.2.2-m0nkrus 全解析:专业视频编辑软件深度指南
前端·adobe·音视频
北城笑笑1 小时前
Chrome:Paused in debugger 的踩坑实录:问题排查全过程与终极解决方案( 在调试器中暂停 )
前端·chrome