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>
相关推荐
光影少年16 分钟前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天2 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_2 小时前
HTML5(前端基础)
前端·html·html5
Jagger_3 小时前
敏捷开发流程-精简版
前端·后端
FIN66683 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing3 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1273 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿3 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66683 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy3 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript