初学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>
相关推荐
C_心欲无痕15 分钟前
ts - tsconfig.json配置讲解
linux·前端·ubuntu·typescript·json
清沫19 分钟前
Claude Skills:Agent 能力扩展的新范式
前端·ai编程
yinuo1 小时前
前端跨页面通信终极指南:方案拆解、对比分析
前端
北辰alk1 小时前
Vue 模板引擎深度解析:基于 HTML 的声明式渲染
vue.js
北辰alk1 小时前
Vue 自定义指令完全指南:定义与应用场景详解
vue.js
yinuo1 小时前
前端跨页面通讯终极指南⑨:IndexedDB 用法全解析
前端
北辰alk2 小时前
Vue 动态路由完全指南:定义与参数获取详解
vue.js
北辰alk2 小时前
Vue Router 完全指南:作用与组件详解
vue.js
北辰alk2 小时前
Vue 中使用 this 的完整指南与注意事项
vue.js
xkxnq2 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js