Vue獲取this.$refs為undefined

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

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

• HTML代碼

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

• JS

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

控制臺打印的時候為undefined

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

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

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

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

因為dom還沒有被渲染出來，而在mounted方法里是可以拿到的

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

項目場景

Vue 2.6.10版本中，父組件獲取子組件問題。

問題描述

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

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

報錯：

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

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

原因分析

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

解決方案

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

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

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

拿到輸出結(jié)果：

總結(jié)

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

最新評論