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來獲取內(nèi)容就會出現(xiàn)xxx is undefined的錯誤

因為ref本身是作為渲染結果被創(chuàng)建的，在渲染的時候是不能訪問的，因為他們還不存在！

如果此時代碼是需要這樣來寫代碼，那么你可以在DOM渲染完畢后再進行獲取

this.$nextTick(() => {
 this.$refs.name... //DOM渲染完畢后就能正常獲取了
})

補充知識：vue ref用法（this.$refs獲取為空）

//6.14更新

但是有個辦法，我們可以使用

this.$nextTick(() => {
  // todo
})
 
setTimeout(() => {
  // todo
}, 0)

來得到數(shù)據(jù)

ref

本身作為渲染結果被創(chuàng)建，在初始渲染的時候不能訪問他們，是不存在的

$refs不是響應式的，只在組件渲染完成后才填充

用于元素或子組件注冊引用信息，注冊完成，將會注冊在父組件$refs對象上

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

1、你在哪里調(diào)用，和你調(diào)用的對象

試試在mounted（）里面調(diào)用有效果沒有

調(diào)用的對象是本來就存在的，還是需要數(shù)據(jù)渲染之后才會出現(xiàn)的，同理，在mounted（）里面調(diào)用看看

2、調(diào)用對象是不是數(shù)組列表

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

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

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

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

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

3、調(diào)用對象是否和v-if結合使用

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

最后

在使用中，我發(fā)現(xiàn)$refs.style只能設置該對象的樣式，獲取出來的值都是空的

以上這篇Vue 解決通過this.$refs來獲取DOM或者組件報錯問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論