關(guān)于vue中ref的使用(this.$refs獲取為undefined)

更新時(shí)間：2022年03月25日 15:11:23 作者：蕾蕾是個(gè)程序員

這篇文章主要介紹了關(guān)于vue中ref的使用(this.$refs獲取為undefined)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue的ref(this.$refs獲取為undefined)

如果你獲取到的總是空的，你注意一下：

1.你在哪里調(diào)用,和你調(diào)用的對(duì)象

試試在mounted（）里面調(diào)用有效果沒有

調(diào)用的對(duì)象是本來就存在的，還是需要數(shù)據(jù)渲染之后才會(huì)出現(xiàn)的，同理，在mounted（）里面調(diào)用看看

2.調(diào)用對(duì)象是不是數(shù)組列表

我一開始設(shè)置ref在v-for列表上，直接獲取this.$refs.name.style，永遠(yuǎn)是空的，

后來才發(fā)現(xiàn)，this.$refs.name是一個(gè)數(shù)組，無法通過 .style 獲取樣式，

只能遍歷這個(gè)this.$refs.name數(shù)組，在this.$refs.name[index]上設(shè)置樣式

// 6.14 更新，這個(gè)說法有點(diǎn)問題

但是像高度寬度，可以通過offsetHeight，等來獲取。

3.調(diào)用對(duì)象是否和v-if結(jié)合使用

ref不是響應(yīng)式的，所有的動(dòng)態(tài)加載的模板更新它都無法相應(yīng)的變化。

解決方案：

通過

setTimeout(() => {

　　　　}, 0)

來得到數(shù)據(jù)

vue的$refs屬性幾個(gè)注意點(diǎn)

1.在vue中獲取dom推薦使用$refs來獲取

可是有時(shí)會(huì)出現(xiàn) this.$refs.xxx 為undefined的情況。

場(chǎng)景1：在created()里使用

在這個(gè)生命周期中進(jìn)行數(shù)據(jù)觀測(cè) ，屬性和方法的運(yùn)算，watch 事件回調(diào)。但是頁(yè)面還沒有掛載上去，沒有e l 屬性， t h i s . el 屬性，this.el屬性，this.refs無法調(diào)用dom。

解決辦法：換成在mounted()里使用

場(chǎng)景2：父元素或當(dāng)前元素使用了v-if或v-show

因?yàn)?refs不是響應(yīng)式的，只在組件渲染完成后才會(huì)生效，在初始渲染的時(shí)候是不存在的。

因?yàn)槭欠琼憫?yīng)式的，所有動(dòng)態(tài)加載的模板更新它都無法相應(yīng)的變化。

解決辦法：可以通過setTimeout(()=>{…}, 0)來實(shí)現(xiàn)。

2.如果使用v-for

遍歷加ref時(shí)可以使用：，即 :ref ="variable" ，這樣得到的是不同的ref。

<div v-for="(item,index) in arr" :key="index">
? <child ?:ref="`refName${index}`"/>
</div>
//this.$refs[`refName${index}`]每一項(xiàng)都是一個(gè)僅包含一個(gè)元素的數(shù)組
this.$refs[`refName${index}`][0].fun();//調(diào)用第一個(gè)組件內(nèi)的方法

但是也可以不使用：，這時(shí)得到的 ref 將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。

<div v-for="(item,index) in arr" :key="index">
? <child ?ref="refName"/>
</div>
//this.$refs.refName是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組
this.$refs.refName[0].fun();//調(diào)用第一個(gè)組件內(nèi)的方法

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: