vue中$refs的使用：通过ref的绑定来使input框自动获取焦点

已于 2022-04-26 15:35:49 修改
阅读量6k 收藏 11
点赞数 3
文章标签： vue.js javascript 前端
于 2022-02-10 19:47:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51196135/article/details/122867600
版权

使用背景：

在vue中一般很少会直接操作DOM，但偶尔会用到，这时可以通过【ref和$refs】两个来实现（减少获取dom节点的消耗）。

 ref的用法：

ref是用来给元素或子组件注册引用信息，引用信息会注册在父组件的 $refs 对象上。

①ref 加在普通的元素上，用this.$refs.name获取到的是dom元素

②ref 加在子组件上，用this.$refs.name获取到的是组件实例，可以使用组件的所有方法。

 注：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期mounted( ){  } 钩子中调用，或者在 this.$nextTick ( ( ) =>{  } ) 中调用。

举例：

在一个项目：点击添加按钮时，input自动获取焦点（通过 $refs + this.$nextTick( ) 来实现）

daima

代码

小只笨笨狗～
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue获取input输入值的问题解决办法
11-26
vue获取input输入值的问题解决办法 v-for里有多行input输入框，vue怎么获取某行的输入的值，随便写了点代码，意思就是后台返回了多行的list集合，页面显示多行输入框，当修改某行的值时进行校验，输入错误友好提示下，后边加个清空按钮，点击清空当前行数据，最开始的想法是，用v-bind:value绑定值，这样就出现一种情况，页面输入的值无法获取到，v-bind不会修改原始list里的值，而且ref也不能动态绑定，ref只能全部获取，this.$refs.itemPriceRef[]，这样取的是所有输入框的值，是个数组，可以在提交前进行验证，但是无法判断某一行操作，并且vue操作DOM
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
主要介绍了vue中$refs, $emit, $on, $once, $off的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue获取/设置input的内容与双向数据绑定
热门推荐
安之ccy的博客
04-28 1万+
单向操作：获取/设置input内容 <div id="app"> <input type="text" v-bind:value="value" v-on:input="changeValue"> <!--输入即改变value值--> <p>{{ value }}</p> <!--用于显示当前value值--> </div> <script src="https://cdn.jsdelivr.net/
Vue3：组件间通信-$refs和$parent的使用
最新发布
Brave_heart4pzj的博客
04-04 750
Vue
Vue中$refs的用法详解
08-27
主要介绍了Vue中$refs的用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
react中ref的3种绑定方式
wan_zaiyunduan的博客
07-25 1751
1.string直接绑定（已不推荐使用） // ref是输入框当前所在的节点 import React, { Component } from 'react' export default class Item extends Component { handleInput1 =()=>{ const {input1} = this.refs; console.log("handleInput1====>",input1.value) }
Vue.js中＜input ref=“input“＞
HWL5679的博客
01-30 450
$refs只会在组件渲染完成后被填充，并且它是非响应式的，不应该在模板或计算属性中使用$refs。
Vue3中ref的用法总结，避免混淆
kiligcoding的博客
04-14 6285
这些都是 ref 函数在 Vue 3 中的一些用法，除了处理响应式数据之外，它还可以访问 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值，使得 Vue 3 变得更加灵活和方便。在Vue 3中，ref除了用于处理响应式数据外，在 Vue 3 中 ref 还可以用于访问组件中的 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值。可以使用 ref 访问到组件的实例，以便在父组件中直接调用子组件中暴露的方法或访问子组件中暴露的数据。存储任何需要在组件中进行状态管理的值。
Vue（ts） - ref & $refs 之el-input获取焦点
若末lan的博客
04-02 3197
场景： 如下图，目录页次号是由3个字段拼接而成，每个字段限制输入长度三个,就自动跳转下一个input框； 方法一： #html: <yo-cell label="目录页次号:"> <!--目录编号--> <el-input v-model="formData.katCode" maxlength="3" @input="goNextInput('inputCG',formData.katCode)" size="mini"></e
vue中，ref属性使用详情介绍
zb865938593的博客
05-24 2870
在以下代码中，我们使用v-for指令循环渲染一个input元素数组，并为每个元素添加一个ref，然后点击按钮时，移除第二个input元素的ref。在父组件中将子组件引入，并在子组件标签上添加ref属性，然后就可以通过this.$refs.myChild获取子组件的引用，在父组件内部调用子组件的sayHello方法。在Vue中，ref是一个特殊的属性，用于获取组件实例或DOM元素的引用。在Vue组件中使用ref可以获取子组件的引用，从而可以在父组件内部调用子组件的方法或访问其数据。
vue----ref属性
淘淘桃的博客
06-25 393
可以写在组件上:在vue中使用 this.$refs.名字 拿到[组件]对象，组件属性，方法直接使用即可。可以写在普通标签：在vue中使用 this.$refs.名字 拿到dom对象，可以原生操作。# ref属性，vue提供的，写在标签上。
vue.js中ref及$refs的使用方法解析
10-16
主要介绍了vue.js中ref及$refs的使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue 解决通过this.$refs来获取DOM或者组件报错问题
11-20
1.关于this.$refs的使用场景 如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 ...2.为什么有时候通过this.$refs.name来获取会报错？ 一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来
vue中的ref和$refs的使用
01-21
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 普通的DOM元素上使用 <input type=textref=TEXT/ > <...
react之旅（五）react 事件对象；如何获取input框值；键盘事件；实现双向数据绑定
letianxf的博客
07-19 1594
一、事件对象 什么是事件对象： 在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息 实现下面的场景： 点击按钮的时候，将按钮的颜色变为蓝色。 import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } changeColor =(e) => { e.ta
vue中$refs的用法及作用详解
u010227042的博客
10-22 596
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。 但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。 然后在javascript里面这样调用：this.$refs.input1这样就可以减少获取dom节点的消耗了 用法如下:...
ref自动获取焦点
Lilico_的博客
04-30 357
<template> <div> 文本1：<input type="text"/> 文本2：<input type="text"/> 文本3：<input type="text" ref="demo"/> </div> </template> <script lang="ts"> import {defineComponent, onMounted, ref} from 'vue'
使用ref如何获取到input标签中的值
m0_47999208的博客
09-10 708
要使用 ref 获取到 input 标签中的值，首先需要创建一个 ref 对象并将其绑定到 input 标签上。然后，可以通过访问 ref 对象的 value 属性来获取标签中的值。，并将其绑定到 input 标签上。然后，在表单的 onSubmit 事件处理函数中，我们可以通过访问。在这个示例中，我们创建了一个 ref 对象。
Vue~ref属性
thisCheng的博客
06-11 172
Vue-ref属性
vue中如何在input生成的时候自动获取焦点
06-10
在 Vue 中，可以使用 `ref` 属性将 input 元素绑定到组件实例中，在 `mounted` 钩子函数中使用 `this.$refs` 获取到 input 元素的引用，再使用 `focus()` 方法使其获取焦点。 示例代码如下： ```html <template> <div> <input ref="myInput" type="text" /> </div> </template> <script> export default { mounted() { this.$refs.myInput.focus(); }, }; </script> ``` 这样在组件渲染完成后，input 元素会自动获取焦点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值