初学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>
相关推荐
发现一只大呆瓜4 分钟前
Vite 兼容降级全解:语法降级、Polyfill 原理与 legacy 插件底层机制
前端·面试·vite
Shirley~~6 分钟前
CC Switch mac安装
前端·ai编程
奇奇怪怪的问题19 分钟前
学习ts笔记(二):属性修饰符,泛型,接口
前端·typescript
明月_清风22 分钟前
全面了解 Vercel:前端开发者的高效武器库与实战指南
前端·next.js
NiceCloud喜云23 分钟前
Claude API PDF 文档问答实战:从原生解析到分页引用的完整方案
java·服务器·前端·网络·数据库·人工智能·pdf
东方小月42 分钟前
vibecoding实战:用 Claude Code 从0到1开发一个 Claude Code
前端·人工智能·架构
marsh020644 分钟前
54 openclaw钩子函数使用:在框架生命周期中注入自定义逻辑
java·前端·spring
TechExplorer3651 小时前
npm install 日志目录
前端·npm·node.js
jaychouchannel1 小时前
深入理解 Vue 3 Composition API:为什么它是现代前端的必修课
vue.js
Darling噜啦啦2 小时前
深入理解 JavaScript 函数:从《语言精粹》第四章看函数的精髓
javascript