初学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>
相关推荐
Csvn几秒前
前端项目管理:需求拆解、排期与风险控制
前端
陈_杨3 分钟前
鸿蒙APP开发-带你走近分构App的分子数据
前端·javascript
Goodbye4 分钟前
深入理解 JavaScript 变量提升(Hoisting)—— 从现象到原理
javascript
橘子星5 分钟前
从零上手!Node.js 快速搭建生成式 AI 后端项目|密钥安全 + 完整可运行代码
前端·后端
陈_杨5 分钟前
鸿蒙APP开发-带你开发锻艺册APP的材料清单功能
前端·javascript
xixixin_7 分钟前
Promise.all 和 Promise.allSettled 详解
前端·javascript·vue.js
暗冰ཏོ8 分钟前
前端数据大屏开发完整指南:Vue3 + ECharts 自适应可视化实战
前端·javascript·echarts·数据大屏·大屏端
陈_杨10 分钟前
鸿蒙APP开发-带你了解单块酷APP参数管理的功能
前端·javascript
moMo11 分钟前
# 从重置样式到 BEM 命名:写一个微信的按钮
前端·css
2301_8156453813 分钟前
saas 一面
前端·面经