1.關(guān)于this.$refs的使用場(chǎng)景

如果ref屬性加在普通元素上，那么this.$refs.name則指向該DOM元素

<p ref="p">hello</p>

<!-- this.$refs.p 指向該DOM元素 -->

如果ref屬性加在組件上，那么this.$refs.name指向該組件實(shí)例

<child-component ref="child"></child-component>

<!-- this.$refs.child 指向該組件 -->

2.為什么有時(shí)候通過(guò)this.$refs.name來(lái)獲取會(huì)報(bào)錯(cuò)？

一個(gè)比較常見(jiàn)的場(chǎng)景：在一個(gè)彈窗打開(kāi)的時(shí)候立刻通過(guò)this.$refs來(lái)獲取內(nèi)容就會(huì)出現(xiàn)xxx is undefined的錯(cuò)誤

因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的，在渲染的時(shí)候是不能訪問(wèn)的，因?yàn)樗麄冞€不存在！

如果此時(shí)代碼是需要這樣來(lái)寫(xiě)代碼，那么你可以在DOM渲染完畢后再進(jìn)行獲取

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

補(bǔ)充知識(shí)：vue ref用法（this.$refs獲取為空）

//6.14更新

但是有個(gè)辦法，我們可以使用

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

來(lái)得到數(shù)據(jù)

ref

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

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

用于元素或子組件注冊(cè)引用信息，注冊(cè)完成，將會(huì)注冊(cè)在父組件$refs對(duì)象上

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

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

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

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

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

我一開(kāi)始設(shè)置ref在v-for列表上，直接獲取this.$refs.name.style，永遠(yuǎn)是空的，

后來(lái)才發(fā)現(xiàn)，this.$refs.name是一個(gè)數(shù)組，無(wú)法通過(guò) .style 獲取樣式，

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

// 6.14 更新，這個(gè)說(shuō)法有點(diǎn)問(wèn)題

但是像高度寬度，可以通過(guò)offsetHeight，等來(lái)獲取。

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

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

最后

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

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

最新評(píng)論