欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE中$refs的基本用法舉例

 更新時間:2022年12月19日 16:07:43   作者:一個好好的程序員  
ref 加在子組件上,用this.$refs.(ref值) 獲取到的是組件實例,可以使用組件的所有方法,?在使用方法的時候直接this.$refs.(ref值).方法() 就可以使用了,這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論