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或者元件報錯問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。