初学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 优化、踩坑汇总 + Webpack 迁移 Vite 实战
前端·webpack·vite
10share6 分钟前
给 JSX 组件也来一份 Vue 式 scoped:jsx-scoped 让样式隔离不再靠自觉
前端·vue.js
小聪7087 分钟前
elpis-core 领域模型驱动设计解析
前端
北城笑笑8 分钟前
Vue 104 ,AI + ECharts + Word:大模型数据可视化报告生成实战(前端导出图文并茂 Word 文档)
前端·vue.js·word·echarts
创新技术阁14 分钟前
FastapiAdmin 实战:二次开发前的准备(环境配置与项目启动)
前端·后端·fastapi
李少兄30 分钟前
JavaScript 运算符完全指南
java·开发语言·javascript
志尊宝33 分钟前
Vue3 零基础每日笔记(010):watchEffect——用到谁就自动听谁的“懒人侦听器“
前端·vue.js·笔记
狗哥哥38 分钟前
从“看对方向”到“做出行动”:投资决策卡
前端
拖孩42 分钟前
一个人 + AI 做的小程序,一个月赚了 36 块
前端·后端·微信小程序
weixin_440730501 小时前
playwright实战-渠道应用操作
开发语言·前端·python