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>
相关推荐
猿大师办公助手9 分钟前
如何在Chrome最新浏览器中调用ActiveX控件?
前端·chrome
V_fanglue370511 分钟前
qmt量化交易策略小白学习笔记第67期【qmt编程之获取ETF申赎清单】
大数据·前端·数据库·笔记·python·学习·区块链
林啾啾39 分钟前
vue3实现自定义主题色切换功能
前端·vue.js
墨·殇1 小时前
vue2实现提取字符串数字并修改数字样式(正则表达式)
前端·javascript·vue.js
软糖工程0011 小时前
正则表达式【详细解读】
大数据·前端·爬虫·python·学习·正则表达式·数据分析
DngYT1 小时前
vue如何挂载路由
前端·javascript·vue.js
呵呵哒( ̄▽ ̄)"2 小时前
vue.js 展示树状结构数据,动态生成 HTML 内容
开发语言·前端·javascript·vue.js
安冬的码畜日常2 小时前
【CSS in Depth 2 精译_035】5.5 Grid 网格布局中的子网格布局(全新内容)
前端·css·css3·网格布局·css布局·子网格·subgrid
JuneTT2 小时前
uniapp 常用高度状态栏,导航栏,tab栏,底部安全高度
前端·javascript·uni-app
i80132 小时前
delphi制作漂亮的农历窗体(IntraWeb+Layui的完美结合)
前端·javascript·layui