vue3自动暴露element-plus组件的ref

自动暴露子组件的方法,注意在TS下,需要自己声明类型,我这里全用any代替了

typescript 复制代码
<template>
  <el-button @click="getFocus">获得焦点</el-button>
  <com ref="comRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import com from './components/com.vue'

const comRef = ref(null);
const getFocus = () => {
  (comRef.value! as any).focus()
};
</script>

子组件

typescript 复制代码
<template>
  <el-input v-model="val" placeholder="请输入文本框" ref="inputRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { InputInstance } from 'element-plus'

const val = ref('');
const inputRef = ref<null | InputInstance>(null);

defineExpose(new Proxy({}, {
  get(_target, key) {
    return (inputRef.value as any)?.[key];
  },
  has(_target, key) {
    return key in inputRef.value! as any;
  },
}))
</script>
相关推荐
qq_12498707533 分钟前
基于Spring Boot的“味蕾探索”线上零食购物平台的设计与实现(源码+论文+部署+安装)
java·前端·数据库·spring boot·后端·小程序
用户65868180338404 分钟前
Vue3 项目编码规范:基于Composable的清晰架构实践
vue.js
编程之路从0到15 分钟前
React Native 之Android端 Bolts库
android·前端·react native
小酒星小杜5 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统 - Build 篇
前端·vue.js·架构
zengyufei7 分钟前
2.4 watch 监听变化
vue.js
奔跑的web.8 分钟前
TypeScript 全面详解:对象类型的语法规则
开发语言·前端·javascript·typescript·vue
江上月51312 分钟前
JMeter中级指南:从数据提取到断言校验全流程掌握
java·前端·数据库
代码猎人14 分钟前
forEach和map方法有哪些区别
前端
恋猫de小郭15 分钟前
Google DeepMind :RAG 已死,无限上下文是伪命题?RLM 如何用“代码思维”终结 AI 的记忆焦虑
前端·flutter·ai编程
byzh_rc23 分钟前
[微机原理与系统设计-从入门到入土] 微型计算机基础
开发语言·javascript·ecmascript