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

叁歲伎倆 2024-04-19 12:59 3阅读 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 条评论，3人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 react 中 ref 的作用

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

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

相关 vue ref的作用

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

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

相关 Adapter的作用及用法(四种适配器详解)

> 首先，我们常用的Adapter有四种，分别是BaseAdapter、SimpleAdapter、ArrayAdapter、SimpleCursorAdapter四种。

川长思鸟来/ 2022年06月04日 02:43/ 0 赞/ 159 阅读

相关 CSS中!important的用法及作用

定义及语法 !important，作用是提高指定样式规则的应用优先权（优先级）。语法格式\{ cssRule !important \}，即写在定义的最后面，例如：box

你的名字/ 2022年04月13日 11:58/ 0 赞/ 221 阅读

相关 VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用

$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例；

喜欢ヅ旅行/ 2021年09月15日 18:52/ 0 赞/ 636 阅读

相关 Vue 中mixin 的用法详解

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。一.区别 1.mixin混入对象和Vuex的区别：　　　　Vuex是状态共享管理，所以

女爷i/ 2021年08月31日 11:34/ 0 赞/ 458 阅读

相关 !important的用法及作用

定义及语法 `!important`，作用是提高指定样式规则的应用优先权（优先级）。语法格式`{ cssRule !important }`，即写在定义的最后面，例如：`

朱雀/ 2021年07月04日 23:51/ 0 赞/ 493 阅读