Vue中ref和$refs的介绍及使用

Posted 2023-03-16

参考技术A

在javascript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

this.$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源

【1】子组件code：

【2】父组件code:

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

一般来讲，获取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>

JavaScript

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

这里的$refs可以看做是ref的选择器，这个$ref是一个对象，通过key可以获取到其中存放的对象。

 

"我只是怕我再也见不到你了。"