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>
相关推荐
lvbb663 分钟前
Vue 项目中基于后端权限的动态路由实现
前端·javascript·vue.js
LaughingZhu4 分钟前
PH热榜 | 2025-03-30
前端·数据库·人工智能·经验分享·mysql·搜索引擎·产品运营
计算机毕设定制辅导-无忧学长6 分钟前
HTML 与 SEO:提升网页可见性的学习进度与技巧(一)
前端·学习·html
知识分享小能手29 分钟前
CSS3学习教程,从入门到精通, 学院网站完整项目 - HTML5 + CSS3 实现(25)
前端·javascript·css·学习·css3·html5·前端项目
Moment1 小时前
终于搞懂了!Source Map 是如何让你定位打包后代码的?💥 💥 💥
前端·javascript·webpack
远小帅1 小时前
基于 Vue.js 的 PDF 文档渲染性能优化实践
vue.js·性能优化·pdf·pdf.js
yang_love10111 小时前
Webpack vs Vite:深度对比与实战示例,如何选择最佳构建工具?
前端·webpack·node.js
好_快1 小时前
Lodash源码阅读-keysIn
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-nativeKeysIn
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-baseKeysIn
前端·javascript·源码阅读