初学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>
相关推荐
徐小夕36 分钟前
万字长文!DeepSeek Super-agent × 企业知识库架构深度拆解与落地实践
前端·vue.js·github
陈随易1 小时前
TanStarter,从搭建到支付,一步到位开始赚美元
前端·后端·程序员
前端双越老师1 小时前
程序员 1v1 访谈系列第十二期:普通人没有核心竞争力
前端·ai编程·全栈
柳杉1 小时前
没有写一行代码:我用 Codex 制作 了一个 3D 智慧展厅可视化大屏
前端·ai编程·three.js
IT_陈寒1 小时前
Redis开发实战:从入门到精通
前端·人工智能·后端
恋猫de小郭1 小时前
Flutter Impeller Vulkan 内存持续上涨,问题没想到是文字阴影
android·前端·flutter
0xBADCODE2 小时前
2026 强网杯 Web 题 cwp · 全链路复盘
前端·安全·web安全·网络安全·系统安全·ctf
麦麦麦当劳大王10 小时前
【油猴脚本】Boss直聘 岗位职责复制
开发语言·前端·javascript
小lu飞11 小时前
2026小红书小工具怎么制作:纯前端 ZIP 打包、沙箱限制与笔记挂载流程
前端·笔记·ai·ai编程
只睡四小时11 小时前
Three.js Sub-tick:漏判 60.7%→0
开发语言·javascript·性能优化·ecmascript·游戏开发·three.js·碰撞检测