初学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>
相关推荐
一木 之林9 分钟前
LangChain 第6章 Agent 智能体核心:create_agent 统一入口与 ReAct 循环
前端·react.js·langchain
不可能片场28 分钟前
Electron 发布进程被回收 用脱离进程组托住
前端·electron
kaixin_learn_qt_ing34 分钟前
hexdump -C /path/to/binary | less 看十六进制内容
前端·css·less
java1234_小锋36 分钟前
【技术专题】HTML5 网页技术 - HTML5 链接与图片
前端·html·html5
sun_weitao38 分钟前
Chrome 扩展插件开发指南
前端·javascript·chrome
小马不起床1 小时前
零基础玩转 FastAPI_12:前端详情增强与角色权限分配
前端·状态模式·fastapi
labview_自动化1 小时前
cvat部署记录
javascript·labview
前端snow1 小时前
ai agent --- 切割文件 RecursiveCharacterTextSplitter
前端
松就是我902981 小时前
可编辑 PPT:调研、设计与实施方案
前端
前端snow1 小时前
ai agent --- Elasticsearch 混合检索
前端