初学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>
相关推荐
不一样的少年_几秒前
PNG/JPG 如何变成 WebP?真相不是改后缀!
前端·后端·图片资源
杉氧11 分钟前
RN 性能调优指南:重渲染(Re-renders)控制与长列表(FlatList)优化
android·前端·react native
一_个前端13 分钟前
[JS] 一站式搞定 PDF、图片、Dom弹窗、表格的浏览器打印功能
前端
JavaGuide17 分钟前
阿里 Qoder 又开源了一个专门给 Claude Code、Codex 做“体检”的项目
前端·后端
不一样的少年_18 分钟前
JPEG 压缩到底在干嘛?小白也能看懂的 8 步拆解
前端·后端·图片资源
速易达网络19 分钟前
用 Three.js 打造一座会呼吸的海岛:海风之屿飞艇巡航的技术实现
开发语言·javascript·ecmascript
三小河30 分钟前
RAG、LLM Wiki、本体(Ontology)到底是个啥?
前端·人工智能·后端
Bs_MoneyMagnet38 分钟前
基于springboot+vue的爱心众筹系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·spring·管理系统
大模型码小白1 小时前
数据可视化:AI 生成 HTML5 动态交互式数据图表
前端·数据库·人工智能·深度学习·机器学习·信息可视化·html5
八荒启·交互动画1 小时前
Web特效01—什么是渲染
前端·javascript·网页特效·八荒启-交互动画