Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue3如何获取绑定在组件上的 textarea DOM元素

vue3如何获取绑定在组件上的 textarea DOM元素

作者头像
蓓蕾心晴
发布于 2023-02-17 05:32:42
发布于 2023-02-17 05:32:42
2.2K00
代码可运行
举报
文章被收录于专栏:前端小叙前端小叙
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script setup lang="ts">

import { ref, onMounted } from "vue";

onMounted(() => {
     transferTextarea.value.textarea.select();
});
</script>
<el-input
    v-model="initText"
    :rows="5"
    type="textarea"
    placeholder=""
/>

当我们给自定义组件绑定 ref,想要获取 textarea 元素时,elemtplus 的 input textarea 元素获取方式如上,注意:获取 DOM 必须要在 onMounted 之后获取,否则获取的为 null。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3 封装第三方组件(一)做一个合格的传声筒 定义一个简单的组件inheritAttrs直接使用的方法父组件里面怎么用方法父组件调用子组件内部的方法
各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了。
用户1174620
2021/04/20
2.4K0
Vue3 封装第三方组件(一)做一个合格的传声筒
    




定义一个简单的组件inheritAttrs直接使用的方法父组件里面怎么用方法父组件调用子组件内部的方法
关于 Vue3 + setup + ts 使用技巧的总结
ref 一般用于基本的数据类型,比如 string,boolean ,reactive 一般用于对象 ref 的地方其实也是调用的 reactive 实现的。
前端达人
2023/08/31
1.1K0
关于 Vue3 + setup + ts 使用技巧的总结
vue3与vue2的区别
新增context.emit,与this.$emit(vue3中只能在methods里使用)作用相同
前端小tips
2021/11/29
6930
vue3与vue2的区别
设计Element UI表单组件居然如此简单!
上文讲解了Jest框架对组件库测试,TypeScript和Jest都为代码质量和研发效率。之前实现Container和Button组件以渲染功能为主,可根据不同属性渲染不同样式去实现布局和不同格式的按钮。
JavaEdge
2024/12/29
5450
设计Element UI表单组件居然如此简单!
Vue3 中 使用 TypeScript
在单文件组件中使用 TypeScript,需要在 <script> 标签上加上 lang="ts" 的 attribute。当 lang="ts" 存在时,所有的模板内表达式都将享受到更严格的类型检查
程序员海军
2023/11/05
8330
vue如何二次封装一个高频可复用的组件
在我们的业务里,我们通常会二次封装一些高频业务组件,比如弹框,抽屉,表单等这些业务组件,为什么要二次封装?我们所有人心里的答案肯定是,同样类似的代码太多了,我想复用组件,或者原有组件可能达不到我想要的效果,我想基于原有组件自定义一些自己的接口,那么此时就需要二次封装了。二次封装虽好,但同时也会带来一定的心智负担,因为二次封装的组件可能会变得不那么纯粹。
Maic
2022/12/21
2.4K0
vue如何二次封装一个高频可复用的组件
用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。
Vue3对于表单的绑定提供了一种简单的方式:v-model。对于使用者来说非常方便,v-model="name" 就可以了。
用户1174620
2022/06/27
1.2K0
Vue2到Vue3,重学这5个常用的API
距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等。
玄姐谈AGI
2023/01/10
9190
Vue2到Vue3,重学这5个常用的API
uni-app(优医咨询)项目实战 - 第2天
uni-app 是组合了 Vue 和微信小程序的相关技术知识,要求大家同时俱备 Vue 和原生小程序的开发基础。
程序员朱永胜
2024/04/19
2950
uni-app(优医咨询)项目实战 - 第2天
【Vue #3】指令补充&样式绑定
Vue 的指令修饰符(Directive Modifiers)是 Vue 模板语法中的重要特性,它们以半角句号 . 开头,用于对指令的绑定行为进行特殊处理
IsLand1314
2025/04/13
1680
Vue2向Vue3过渡,持续记录
迁移指南:https://v3.cn.vuejs.org/guide/migration/introduction.html
房东的狗丶
2023/02/17
6.3K0
VUE组件封装_vue使用组件
组件化就是将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能,使得整个页面的管理和维护变得非常容易。
全栈程序员站长
2022/11/09
2.1K0
VUE组件封装_vue使用组件
Vue2/3 自定义组件的 v-model 到底怎么写?💎
在使用第三方UI组件库时会发现可以在他们的组件上使用 v-model ,比如 Element-UI 或者 Element-plus 的 el-input 就可以使用 v-model 进行数据绑定。
德育处主任
2022/09/09
8950
Vue2/3 自定义组件的 v-model 到底怎么写?💎
【Vue.js——Bug解决】凭空消失的TA(蓝桥杯真题-2320)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
Rossy Yan
2025/01/27
1740
【Vue.js——Bug解决】凭空消失的TA(蓝桥杯真题-2320)【合集】
Vue3组件通信相关的知识梳理
我们知道vue3的Composition Api是它几个最大亮点之一,所以下文都是在setup中演示代码的实现。后面会以开发几个简单form组件为例子来演示。
前端达人
2021/08/10
3.7K0
Vue3组件通信相关的知识梳理
vue3后台管理系统(模板)
本篇文章主要介绍使用element-plus进行页面的布局和数据展示处理,后续笔记将继续分享和介绍动态路由菜单的处理,以及用户权限的动态校验。(。・・)ノ
前端小tips
2021/11/25
5K0
vue3后台管理系统(模板)
Vue3.0 新特性以及使用变更总结(实际工作用到的)
Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变更。
@超人
2021/03/23
2.6K0
Vue3.0 新特性以及使用变更总结(实际工作用到的)
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》070-商业项目:电商后台管理系统实战(商品管理模块的开发)
在电商平台中,商品管理模块是连接商家与消费者的重要桥梁。它不仅承担着商品信息的录入、修改与删除等基本功能,还涉及到库存管理、价格调整、上下架操作等多项关键任务。一个高效的商品管理模块能够帮助商家轻松管理各种商品,提高销售效率,并确保用户获得准确的信息。
愚公搬代码
2025/06/03
1720
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》070-商业项目:电商后台管理系统实战(商品管理模块的开发)
Vue常用指令02-v-on/v-bind/v-model/自定义指令【1小时掌握vue3系列】
Hello,大家好!我是方才,前面已经学习条件渲染和列表渲染的指令,今天我们一口气把剩下的内容搞定。包括监听事件v-on、动态绑定v-bind、双向绑定v-model以及不常用的指令和自定义指令。
方才编程_公众号同名
2024/11/18
2590
Vue常用指令02-v-on/v-bind/v-model/自定义指令【1小时掌握vue3系列】
前端系列15集-watch,watchEffect,eventBus
watchEffect,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
达达前端
2023/10/08
5790
推荐阅读
相关推荐
Vue3 封装第三方组件(一)做一个合格的传声筒 定义一个简单的组件inheritAttrs直接使用的方法父组件里面怎么用方法父组件调用子组件内部的方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验