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

一般來講，獲取DOM元素，需要使用document.querySelector('#input1')方法去獲取dom節點，然后再獲取input1的值。

但是使用了ref綁定之后，我們就不需要再獲取dom節點了，可以直接在上面的input上綁定input1，然后$refs里面調用就行。

在JavaScript里面通過this.$refs.input1去調用，這樣的做法實際上是訪問VUE虛擬出來的DOM，可以有效減少獲取/操作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可以獲取到其中存放的對象。

當然了，既然是對象，也可以使用方括號運算符去訪問，具體是this.$refs[input1]。

 

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