關(guān)于vue中ref的使用(this.$refs獲取為undefined)
vue的ref(this.$refs獲取為undefined)
如果你獲取到的總是空的,你注意一下:
1.你在哪里調(diào)用,和你調(diào)用的對象
試試在mounted()里面調(diào)用有效果沒有
調(diào)用的對象是本來就存在的,還是需要數(shù)據(jù)渲染之后才會(huì)出現(xiàn)的,同理,在mounted()里面調(diào)用看看
2.調(diào)用對象是不是數(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)用對象是否和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的情況。
場景1:在created()里使用
在這個(gè)生命周期中進(jìn)行數(shù)據(jù)觀測 ,屬性和方法的運(yùn)算,watch 事件回調(diào)。但是頁面還沒有掛載上去,沒有e l 屬 性 , t h i s . el 屬性,this.el屬性,this.refs無法調(diào)用dom。
解決辦法:換成在mounted()里使用
場景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è)包含了對應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。
<div v-for="(item,index) in arr" :key="index"> ? <child ?ref="refName"/> </div> //this.$refs.refName是一個(gè)包含了對應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組 this.$refs.refName[0].fun();//調(diào)用第一個(gè)組件內(nèi)的方法
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue報(bào)錯(cuò):Injection?"xxxx"?not?found的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò):Injection?"xxxx"?not?found的解決辦法,文中通過圖文將解決的辦法介紹的非常詳細(xì),對大家的學(xué)習(xí)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07前端vue項(xiàng)目debugger調(diào)試操作詳解
在vue項(xiàng)目調(diào)試的時(shí)候,代碼里面標(biāo)注debugger,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目debugger調(diào)試操作的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁面,類似于縱向走馬燈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12