初学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>
相关推荐
恋猫de小郭几秒前
能在手机本地跑的图像生成模型 Bonsai Image ,效果还不错
前端·aigc·ai编程
Bigger1 分钟前
实战:搭建 AI Code Review 自动化流水线
前端·ci/cd·自动化运维
IT_陈寒8 分钟前
被Vite的HMR坑惨了,原来这样配置才能用对!
前端·人工智能·后端
The Sheep 202310 分钟前
EFcore 查询数据
java·javascript
怕浪猫13 分钟前
Electron 开发实战(七):网络通信与 API 集成全解
前端·javascript·electron
凌览17 分钟前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦031820 分钟前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm21 分钟前
立体echarts柱状图咋做
前端·vue.js·echarts
wuhen_n30 分钟前
阿里云百炼平台 API 接入教程(附 Node.js + TypeScript 实战)
前端·人工智能·阿里云·ai编程
码语智行30 分钟前
操作日志注解模块
java·前端·python