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

最新推荐文章于 2026-01-05 14:50:19 发布

原创最新推荐文章于 2026-01-05 14:50:19 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

前端(Vue/Javascript) 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Vue中的$refs特性，如何通过ref属性绑定DOM元素，以及如何在JavaScript中使用$refs来避免频繁查询DOM，从而提升性能。

这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，有需要的朋友可以参考下。

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

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

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

用法如下:

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

下面给大家介绍下vue $refs的基本用法，具体代码如下所示：

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

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

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

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

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