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

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

1.你在哪里調用,和你調用的對象

試試在mounted（）里面調用有效果沒有

調用的對象是本來就存在的，還是需要數據渲染之后才會出現的，同理，在mounted（）里面調用看看

2.調用對象是不是數組列表

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

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

只能遍歷這個this.$refs.name數組，在this.$refs.name[index]上設置樣式

// 6.14 更新，這個說法有點問題

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

3.調用對象是否和v-if結合使用

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

解決方案：

通過

setTimeout(() => {

　　　　}, 0)

來得到數據

vue的$refs屬性幾個注意點

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

可是有時會出現 this.$refs.xxx 為undefined的情況。

場景1：在created()里使用

在這個生命周期中進行數據觀測 ，屬性和方法的運算，watch 事件回調。但是頁面還沒有掛載上去，沒有e l 屬 性 ， t h i s . el 屬性，this.el屬性，this.refs無法調用dom。

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

場景2：父元素或當前元素使用了v-if或v-show

因為$refs不是響應式的，只在組件渲染完成后才會生效，在初始渲染的時候是不存在的。

因為是非響應式的，所有動態(tài)加載的模板更新它都無法相應的變化。

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

2.如果使用v-for

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

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

但是也可以不使用 ：，這時得到的 ref 將會是一個包含了對應數據源的這些子組件的數組。

<div v-for="(item,index) in arr" :key="index">
? <child ?ref="refName"/>
</div>
//this.$refs.refName是一個包含了對應數據源的這些子組件的數組
this.$refs.refName[0].fun();//調用第一個組件內的方法

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論