vue中$refs的用法及作用详解

叁歲伎倆 2024-04-19 12:59 61阅读 0赞

一般来讲，获取DOM元素，需`document.querySelector（".input1"）`获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：`this.$refs.input1`这样就可以减少获取dom节点的消耗了

用法如下:

HTML:

<div id="app">
      <input type="text" ref="input1"/>
      <button @click="add">添加</button>
    </div>

JS:

<script>
    new Vue({
      el: "#app",
      methods:{
      add:function(){
        this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
        }
      }
    })
    </script>

![format_png][]

![format_png 1][]

## 注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空， ##

[http://ddrv.cn/a/212452][http_ddrv.cn_a_212452]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTYwOTU3OS8yMDE5MDUvMTYwOTU3OS0yMDE5MDUxNTExMTYyODEyNi00MTUxMTUwNDYucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTYwOTU3OS8yMDE5MDUvMTYwOTU3OS0yMDE5MDUxNTExMTgwNDEwNS04NzkzNDk3NTUucG5n?x-oss-process=image/format,png
[http_ddrv.cn_a_212452]: http://ddrv.cn/a/212452

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中$refs的用法及作用详解

般来讲，获取DOM元素，需`document.querySelector（".input1"）`获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，...

叁歲伎倆/ 2024年04月19日 12:59/ 0 赞/ 62 阅读

相关【Docker】企业中 Docker 的 Dockerfile 用法及作用详解

企业中 Docker 的 Dockerfile 用法及作用详解本文将详细介绍企业中 Docker 的 Dockerfile 用法及其在企业中的作用。通过使用 Java

本是古典何须时尚/ 2024年03月02日 08:05/ 0 赞/ 63 阅读

相关【收藏】Vue中ref和$refs的介绍及使用

实例（通过ref特性调用子组件的方法）【1】子组件code： <template> <div>{ {msg}}</div>

た入场券/ 2023年10月04日 10:53/ 0 赞/ 15 阅读

相关 Java中static作用及用法详解

1.1概述： static是静态修饰符，什么叫静态修饰符呢？大家都知道，在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的，而所谓静态就是指在编译后所分配的内

灰太狼/ 2023年10月01日 06:01/ 0 赞/ 25 阅读

相关 Vue this.$refs的作用

案例一、ref 写在标签上时 <!-- ref 写在标签上时：this.$refs.名字获取的是标签对应的dom元素 ref 写在组件上时：这时

╰半橙微兮°/ 2023年09月30日 14:28/ 0 赞/ 5 阅读

相关 vue中$refs的用法及作用详解

一般来讲，获取DOM元素，需要使用document.querySelector('\input1')方法去获取dom节点，然后再获取input1的值。但是使用了ref绑定之

￡神魔★判官ぃ/ 2023年06月04日 03:57/ 0 赞/ 18 阅读

相关 vue中$refs的用法及作用详解

1. 一般来讲，获取DOM元素，需\\document.querySelector（".input1"）\\获取这个dom节点，然后在获取input1的值。 2. 但是用r

朱雀/ 2023年02月16日 12:26/ 0 赞/ 207 阅读

相关 vue中ref和$refs的介绍及使用

文章目录 Vue中ref和$refs的介绍及使用 ref介绍 this.$refs介绍实例（通过ref特性调用子组件的方法

╰+攻爆jí腚メ/ 2022年12月29日 01:36/ 0 赞/ 210 阅读

相关 react 中 ref 的作用

帮助我们在 react 里面直接获取 dom 元素使用的, 一般情况下尽量不用. 在做复杂业务比如动画, 不可避免要用到页面标签时, 可以用 ref. ref 和 se

向右看齐/ 2022年12月10日 03:41/ 0 赞/ 216 阅读

相关 vue ref的作用

一、示例  <p ref="p">hello</p>

小鱼儿/ 2022年11月15日 03:52/ 0 赞/ 167 阅读