初学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>
相关推荐
于慨12 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz12 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶12 小时前
前端交互规范(Web 端)
前端
像我这样帅的人丶你还12 小时前
别再让JS耽误你进步了。
css·vue.js
@yanyu66613 小时前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
CHU72903513 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing13 小时前
Page-agent MCP结构
前端·人工智能
王霸天13 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航13 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界13 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript