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>
相关推荐
萧行之3 小时前
Observalble Plot和图形语法理论
前端·数据可视化
开开心心就好3 小时前
手机悬屏翻译工具外语游戏漫画APP全覆盖
android·前端·javascript·python·游戏·pdf·html
支支დ3 小时前
Phind 前端特定优势:AI 编程助手的体验革新
前端
DDXYcoder3 小时前
万字解析动态内存从编译到运行
java·前端·算法
光影少年3 小时前
react navite封装一个RN 通用按钮组件
前端·javascript·react native·react.js·前端框架
晴天163 小时前
CSS 预处理器深度解析-Day35
前端·css
恋猫de小郭3 小时前
AI 时代,也许你的 Flutter 需要一套 Dartastic OpenTelemetry 监控
android·前端·flutter
独立开发之道3 小时前
【three.js教程】Three.js 矩阵变换:position/quaternion/scale 和 matrix 到底怎么配合
开发语言·javascript·矩阵
wujiuhsu3 小时前
前端实现二维码生成器:Canvas、SVG、纠错等级、扫码校验与批量
前端
计算机魔术师4 小时前
从卖铲人到圈地:英伟达129亿拿下Hugging Face
前端