vue3自动暴露element-plus组件的ref

自动暴露子组件的方法,注意在TS下,需要自己声明类型,我这里全用any代替了

<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>

子组件

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/883022.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何使用 Bittly 为基于 HTTP 的 API 快速创建 UI 操作界面

在开发 Web 应用或服务时&#xff0c;通常会提供不同数量的 API 接口给客户端或其他第三方使用&#xff0c; 当 API 数量达到一定数量的时候&#xff0c;在处理接口间的调用链以及参数关系时就会变得异常麻烦。 在这种情况下便可通过 Bittly 的面板功能将这些 API 结构进行组装…

电子元件制造5G智能工厂物联数字孪生平台,推进制造业数字化转型

5G智能工厂与物联数字孪生平台的融合应用&#xff0c;不仅为电容器制造业注入了新的活力&#xff0c;更为整个制造业的数字化转型树立了新的标杆。电子元件制造过程中&#xff0c;数字孪生平台通过实时监测生产线的各个环节&#xff0c;实现了生产流程的可视化监控。管理人员可…

es的封装

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、类和接口介绍0.封装思想1.es的操作分类 二、创建索引1.成员变量2.构造函数2.添加字段3.发送请求4.创建索引总体代码 三.插入数据四.删除数据五.查询数据 前…

大数据新视界 --大数据大厂之探索ES:大数据时代的高效搜索引擎实战攻略

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

java 获取集合a比集合b多出来的对象元素

public class OrderListEntity {/*** deprecated 对象集合的处理* param aData 集合a* param bData 集合b* return 返回集合a比集合b多出来的部分, 通过id判断*/public static List<OrderListEntity> AHasMoreThanBData(List<OrderListEntity> aData, List<Ord…

AI日常绘画【国庆海报】:盛世迎华诞,Flux国庆节海报制作教程

大家好我是安琪&#xff01;&#xff01;&#xff01; 马上就要到祖国母亲的节日了&#xff0c;想想心里都美滋滋的&#xff0c;终于可以放松一下了。相信AI绘画关于国庆主题肯定也会精彩纷呈吧&#xff0c;今天和大家分享几组关于国庆海报的制作教程。 本文使用基于Flux的相关…

西安交大曹相湧、孟德宇教授团队最新成果┆HSIGene: 一个用于高光谱图像生成的基础模型(含详细视频解读)

目录 论文简介 1. 团队介绍 2. 研究背景及主要贡献 3. 方法 4. 实验及结果 5. 总结与展望 6. 论文介绍视频 参考文献 论文简介 本推文详细介绍了一篇西安交通大学孟德宇教授与曹相湧副教授团队最新论文《HSIGene: A Foundation Model For Hyperspectral Image Gener…

微信小程序报名表怎么弄_轻松打造高效便捷的互动新体验

在当今数字化时代&#xff0c;便捷与高效成为了我们日常生活中不可或缺的一部分。无论是企业活动、社团招新&#xff0c;还是日常办公统计&#xff0c;一个优秀的报名工具都能极大地提升我们的工作效率和用户体验。今天&#xff0c;就让我们一起探索如何通过微信小程序报名表&a…

Growthly Quest 增长工具:助力 Web3 项目实现数据驱动的增长

作者&#xff1a;Stella L (stellafootprint.network) 在瞬息万变的 Web3 领域&#xff0c;众多项目在用户吸引、参与和留存方面遭遇重重难关。Footprint Analytics 推出 Growthly&#xff0c;作为应对这些挑战的全方位解决方案&#xff0c;其中创新性的 Quest&#xff08;任务…

如何确定SAP 某些凭证或者单号的号码编码范围的 OBJECT 是什么?

在SAP的运维或者项目实施中&#xff0c;有时会如何确定SAP 某些凭证或者单号的号码 OBJECT 是什么&#xff1f; 一般一下常用的可以通过事务代码 例如&#xff1a; XDN1 Create Number Ranges for Customer Accounts&#xff0c;定义客户编码FBN1查看维护会计凭证号范围 我…

Java开发:文件上传和下载

一、文件上传 使用MultipartFile 类型接收参数&#xff1b; 调用上传有两种方式&#xff1a; 方式一&#xff1a;使用curl命令 curl -F "file/data/filename.txt" http://localhost:8080/upload --verbose方式二&#xff1a;使用html&#xff0c;写一个form表单&…

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-21

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-21 1. AIvril: AI-Driven RTL Generation With Verification In-The-Loop Authors: Mubashir ul Islam, Humza Sami, Pierre-Emmanuel Gaillardon, and Valerio Tenace AIVRIL: 人工智能驱动的RTL生成与验证内…

问题:机器字长为n位的二进制数可以用补码来表示()个不同的有符号定点整数。

一、概念 概念&#xff1a;无论原码、反码、补码&#xff0c;n位二进制数可以表示2^n个数值 二、从范围证明 有符号的情况下&#xff0c;表格如下&#xff1a; 其中&#xff0c;原码、反码含有-0、0 &#xff0c; 而补码不划分0 由此&#xff0c;可知&#xff1a; ① 原码…

Pygame中Sprite实现逃亡游戏3

在《Pygame中Sprite实现逃亡游戏2》中实现了飞龙和飞火的显示。接下来实现玩家跳跃效果&#xff0c;如图1所示。 图1 玩家跳跃效果 1 按键响应 当玩家按下键盘中空格按键后&#xff0c;游戏中的玩家就会跳跃&#xff0c;用于躲避飞火。在while True循环判断按键的代码中&…

使用SoapUI、Postman工具调用Webservice方法

SoapUI工具更适合调用Webservice使用。 1.使用SoapUI工具调用Webservice 创建“New SOAP Project” 自行定义一个项目名称&#xff0c;输入wsdl地址&#xff1a; 在左侧列表找到方法名&#xff0c;双击“Request 1”, 在请求数据中&#xff0c;添加对应的参数&#xff0c;然…

ESP8266/01s模块烧录MQTT AT固件篇

&#xff08;代码完美实现&#xff09;stm32 新版 onenet mqtt物联网(保姆级教程) 地址&#xff1a; &#xff08;代码完美实现&#xff09;stm32 新版 onenet mqtt物联网(保姆级教程)https://blog.csdn.net/Wang2869902214/article/details/142501323 乐鑫ESP8266/安信可…

Linux-L12-更改文件的拥有者

更改文件的拥有者 背景改变单个文件的拥有者改变目录及其子目录和文件的拥有者&#xff1a;改变文件的拥有组&#xff1a;同时改变文件的拥有者和拥有组&#xff1a;使用引用文件的拥有者和组 背景 文件被更改了无法访问&#xff0c;总是显示access deny… 在Linux系统中&…

await命令使用注意点

第一点&#xff0c;前面已经说过&#xff0c;await 命令后面的 Promise 对象&#xff0c;运行结果可能是 rejected&#xff0c;所以最好把 await 命令放在 try...catch 代码块中 第二点&#xff0c;多个 await 命令后面的异步操作&#xff0c;如果不存在继发关系&#xff0c;最…

程序员转型攻略:数据分析师、AI大模型工程师、产品经理、云计算工程师,哪个更适合你?

先给结论再说理由&#xff1a;数据分析师、AI大模型工程师、产品经理和云计算工程师。 这些领域不仅因应了当前技术发展的趋势&#xff0c;也为程序员提供了转型的广阔舞台和职业发展的新机遇。 一起来看看吧&#xff01; 数据分析师&#xff1a;数据驱动决策的关键 程序员…

48岁阿姨遇上AI,半年变现30万,AI时代,如何用AI来增加副业收入

近两年疫情反复冲击经济&#xff0c;大小企业纷纷裁员降薪&#xff0c;搞得很多打工人人心惶惶。大多数人上班工资不多&#xff0c;还得看公司脸色&#xff0c;所以不少人都开始尝试做副业&#xff0c;增加一份经济来源。 而随着AI技术的崛起&#xff0c;又给普通人带来新机遇…