Vue獲取this.$refs為undefined

最近在修改bug的時(shí)候，需要獲取到dom元素進(jìn)行操作

條件是通過(guò)屏幕寬度來(lái)改變獲取到dom元素的定位位置，我選擇通過(guò)JS的方式去改變

• HTML代碼

<div ref = "mydiv"></div>

• JS

created(){?
?? ?console.log(this.$refs.mydiv)
}

控制臺(tái)打印的時(shí)候?yàn)閡ndefined

然后開(kāi)始檢查字母和用法，發(fā)現(xiàn)都沒(méi)有問(wèn)題，就只有在 methods 函數(shù)里面也打印一下，這個(gè)時(shí)候發(fā)現(xiàn)打印就完全沒(méi)問(wèn)題，也得到我想得到的了，那問(wèn)題應(yīng)該就出在生命周期函數(shù) created 上了，去查閱資料，果不其然

這個(gè)時(shí)候就需要說(shuō)一下兩個(gè)生命周期函數(shù)了：

• created （實(shí)例創(chuàng)建成功，此時(shí) data 中的數(shù)據(jù)顯示出來(lái)了，dom還未生成）
• mounted（dom生成，data數(shù)據(jù)在模板中顯示出來(lái)）

如果在created方法里this.$refs[dom]去獲取dom節(jié)點(diǎn)是獲取不到的

因?yàn)閐om還沒(méi)有被渲染出來(lái)，而在mounted方法里是可以拿到的

Vuejs this.$refs 調(diào)用報(bào)undefined的處理

項(xiàng)目場(chǎng)景

Vue 2.6.10版本中，父組件獲取子組件問(wèn)題。

問(wèn)題描述

父組件調(diào)子組件方法報(bào)undefined找不到

父組件中使用子組件代碼  <UploadFile ref="refupload" ></UploadFile>

報(bào)錯(cuò)：

先console.log(this.$refs);發(fā)現(xiàn)外面沒(méi)有refupload，里面有對(duì)象，不是undefined。

然后直接通過(guò)console.log(this.$refs.refupload);輸出，結(jié)果undefined報(bào)錯(cuò)。

原因分析

外層有v-if包裹，導(dǎo)致未渲染報(bào)錯(cuò)。

解決方案

初步錯(cuò)誤的嘗試：僅使用this.$nextTick方法，結(jié)果還是獲取undefined

有效方案1：使用this.$nextTick，但需要注意v-if條件中參數(shù)的賦值需要和this.$nextTick在同一個(gè)方法體中！

有效方案2：v-show 替換掉v-if

拿到輸出結(jié)果：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論