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>
相关推荐
秋田君5 分钟前
深入理解JavaScript设计模式之闭包与高阶函数
开发语言·javascript·设计模式
山有木兮木有枝_9 分钟前
JavaScript预编译机制深度解析:从V8引擎到执行上下文
前端
袁煦丞12 分钟前
电子书阅读器界的"万能工具"Koodo Reader :cpolar内网穿透实验室第593个成功挑战
前端·后端·远程工作
半醉看夕阳29 分钟前
HarmonyOS开发 ArkTS 之字符串的剖析
javascript·harmonyos·arkts
程序猿小D33 分钟前
第14节 Node.js 全局对象
linux·前端·npm·node.js·编辑器·vim
Mintopia38 分钟前
当代码遇见光影魔术师:用 JavaScript 揭秘环境光遮蔽的奇幻世界
前端·javascript·计算机图形学
xd000021 小时前
9.axios底层原理,和promise的对比(2)
vue.js
Dignity_呱1 小时前
别在傻傻分不清any void never unknown的场景啦
前端·vue.js·typescript
站在风口的猪11081 小时前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5
crary,记忆1 小时前
Angular报错:cann‘t bind to ngClass since it is‘t a known property of div
前端·javascript·angular·angular.js