ref 有三種用法：

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

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

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

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

第一種用法舉例

<template>
 <div>
   <h2>refs</h2>
   <input ref="inp" type="text" />
 </div>
</template>
<script>
export default {
 //ref 需要在dom渲染完成后才會(huì)有，在使用的時(shí)候確保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時(shí)記得加 :號(hào)，

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

（加冒號(hào)的，說明后面的是一個(gè)變量或者表達(dá)式；沒加冒號(hào)的后面就是對(duì)應(yīng)的字符串常量

（String））

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

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

this.$refs[refsArrayItem]。

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

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

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

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

擴(kuò)展知識(shí)點(diǎn)

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

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

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

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

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

示例：

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

代碼：

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

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

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

最新評(píng)論