ref 有三種用法：

　1、ref 加在普通的元素上，用this.$refs.（ref值） 獲取到的是dom元素。

　2、ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實例，可以使用組件的所有方法。

         在使用方法的時候直接this.$refs.（ref值）.方法（） 就可以使用了。

　3、如何利用 v-for 和 ref 獲取一組數(shù)組或者dom 節(jié)點。

第一種用法舉例

<template>
 <div>
   <h2>refs</h2>
   <input ref="inp" type="text" />
 </div>
</template>
<script>
export default {
 //ref 需要在dom渲染完成后才會有，在使用的時候確保dom已經(jīng)渲染完成。比如在生命周期 mounted(){} 鉤子中調(diào)用，或者在 this.$nextTick(()=>{}) 中調(diào)用。
created() {
 // 在生命周期created中可以查詢到變量，但是dom還未渲染完成，
    需要借助this.$nextTick(()=>{})
 this.$nextTick(() => {
 console.log(this.$refs.inp);
  });
 },
};
</script>

應(yīng)注意的坑：

1、如果通過v-for 遍歷想加不同的ref時記得加 :號，

即 :ref =某變量 ;這點和其他屬性一樣，如果是固定值就不需要加 :號，如果是變量記得加 :號。

（加冒號的，說明后面的是一個變量或者表達式；沒加冒號的后面就是對應(yīng)的字符串常量

（String））

2、通過 :ref =某變量 添加ref（即加了:號） ,如果想獲取該ref時需要加 [0]，如

this.$refs[refsArrayItem] [0]；如果不是:ref =某變量的方式而是 ref =某字符串時則不需要加，如

this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成后才會有，在使用的時候確保dom已經(jīng)渲染完成。比如在生命周期

mounted(){} 鉤子中調(diào)用，或者在 this.$nextTick(()=>{}) 中調(diào)用。

2、如果ref 是循環(huán)出來的，有多個重名，那么ref的值會是一個數(shù)組 ，此時要拿到單個的ref 只需要

循環(huán)就可以了。

擴展知識點

vue---$refs的用法【詳解】

在用VUE開發(fā)項目的時候，經(jīng)常會使用到$refs來操作DOM，那么它究竟該怎么使用呢？

首先，平時在用JS開發(fā)項目的時候，獲取DOM元素，使用的是 document.querySelector("#id") 來獲取DOM元素，并且可以操作或獲取其屬性，例如獲取 input 的 value 值。

如果是使用VUE，可以使用 ref 來進行綁定，就不需要獲取DOM節(jié)點了，然后通過 $refs 來進行操作或獲取屬性。

例如使用 JavaScript 里面通過 this.$refs.input1 去調(diào)用，這樣的做法實際上是訪問VUE虛擬出來的DOM，可以有效減少獲取/操作DOM節(jié)點的性能消耗。

示例：

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

代碼：

add:function(){
  // this.$refs[input1].value = "test"; // 可以用運算符去訪問
  this.$refs.input1.value = "test"; // 有效減少獲取dom節(jié)點的性能消耗
}

這里的 $refs 相當(dāng)于是一個通用選擇器，然后通過 key 去訪問存儲的對象。

到此這篇關(guān)于VUE中$refs的基本用法的文章就介紹到這了,更多相關(guān)VUE中$refs用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論