如何使用$refs

這次帶給大家如何使用$refs，使用$refs的注意事項有哪些，以下就是實戰案例，一起來看一下。

一般來講，取得DOM元素，需document.querySelector（".input1"）取得這個dom節點，然後在取得input1的值。

但用ref綁定之後，​​我們就不需要在取得dom節點了，直接在上面的input上綁定input1，然後$refs裡面呼叫就行。

然後在javascript裡面這樣呼叫：this.$refs.input1 這樣就可以減少取得dom節點的消耗了

用法如下:

## HTML:

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

JS:

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

以下跟大家介紹下vue $refs的基本用法，具體程式碼如下所示：

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<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節點的消耗了

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

處理父元件方法更新到子元件無法渲染

如何使用vuex操作state物件

以上是如何使用$refs的詳細內容。更多資訊請關注PHP中文網其他相關文章！