Vue 解決通過this.$refs來獲取DOM或者元件報錯問題
1.關於this.$refs的使用場景
如果ref屬性加在普通元素上,那麼this.$refs.name則指向該DOM元素
<p ref="p">hello</p>
<!-- this.$refs.p 指向該DOM元素 -->
如果ref屬性加在元件上,那麼this.$refs.name指向該元件例項
<child-component ref="child"></child-component>
<!-- this.$refs.child 指向該元件 -->
2.為什麼有時候通過this.$refs.name來獲取會報錯?
一個比較常見的場景:在一個彈窗開啟的時候立刻通過this.$refs來獲取內容就會出現xxx is undefined的錯誤
因為ref本身是作為渲染結果被建立的,在渲染的時候是不能訪問的,因為他們還不存在!
如果此時程式碼是需要這樣來寫程式碼,那麼你可以在DOM渲染完畢後再進行獲取
this.$nextTick(() => { this.$refs.name... //DOM渲染完畢後就能正常獲取了 })
補充知識:vue ref用法(this.$refs獲取為空)
//6.14更新
但是有個辦法,我們可以使用
this.$nextTick(() => { // todo }) setTimeout(() => { // todo },0)
來得到資料
ref
本身作為渲染結果被建立,在初始渲染的時候不能訪問他們,是不存在的
$refs不是響應式的,只在元件渲染完成後才填充
用於元素或子元件註冊引用資訊,註冊完成,將會註冊在父元件$refs物件上
如果你獲取到的總是空的,你注意一下:
1、你在哪裡呼叫,和你呼叫的物件
試試在mounted()裡面呼叫有效果沒有
呼叫的物件是本來就存在的,還是需要資料渲染之後才會出現的,同理,在mounted()裡面呼叫看看
2、呼叫物件是不是陣列列表
我一開始設定ref在v-for列表上,直接獲取this.$refs.name.style,永遠是空的,
後來才發現,this.$refs.name是一個數組,無法通過 .style 獲取樣式,
只能遍歷這個this.$refs.name陣列,在this.$refs.name[index]上設定樣式
// 6.14 更新,這個說法有點問題
但是像高度寬度,可以通過offsetHeight,等來獲取。
3、呼叫物件是否和v-if結合使用
ref不是響應式的,所有的動態載入的模板更新它都無法相應的變化。
最後
在使用中,我發現$refs.style只能設定該物件的樣式,獲取出來的值都是空的
以上這篇Vue 解決通過this.$refs來獲取DOM或者元件報錯問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。