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