初学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>
相关推荐
candyTong1 小时前
阿里开源 AI Code Review 工具:ocr review 的执行链路解析
javascript·后端·架构
铁皮饭盒2 小时前
TypeBox 比 Zod.js 校验 快10倍, 还兼容AI 工具调用, 他做对了什么?
前端·javascript·后端
Bigger10 小时前
Tauri (26)——托盘图标总对不上系统主题?一行 Template Image 搞定
前端·rust·app
To_OC11 小时前
从一次栈溢出报错说起,我把递归彻底扒明白了
javascript·算法·程序员
kyriewen13 小时前
面试官问你:“AI 能写 80% 的代码了,公司为什么还需要你?”
前端·javascript·面试
甲维斯13 小时前
又升级咯!坦克大战2026,科技与复古并存!
前端·人工智能·游戏开发
Goodbye16 小时前
从 Token 到 Embedding:LLM 核心基础深度解析
javascript·人工智能
用户9385156350716 小时前
工具调用背后:LLM 如何突破“缸中大脑”,操控真实世界?
javascript·人工智能
Goodbye16 小时前
从函数到智能:LLM Tool Use 深度解析
javascript·人工智能