初学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>
相关推荐
xixingzhe214 小时前
idea启动vue项目
java·vue.js·intellij-idea
超级无敌暴龙兽15 小时前
和我一起刷面试题呀
前端·面试
wzl2026121315 小时前
企业微信定时群发技术实现与实操指南(原生接口+工具落地)
java·运维·前端·企业微信
小码哥_常15 小时前
Robots.txt:互联网爬虫世界的“隐形规则”
前端
小码哥_常15 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒15 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水15 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
coderyi16 小时前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅16 小时前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试