Vue中獲取this.$refs為undefined的問題
Vue獲取this.$refs為undefined
最近在修改bug的時(shí)候，需要獲取到dom元素進(jìn)行操作
條件是通過屏幕寬度來改變獲取到dom元素的定位位置，我選擇通過JS的方式去改變
- HTML代碼
<div ref = "mydiv"></div>
- JS
created(){?
?? ?console.log(this.$refs.mydiv)
}控制臺(tái)打印的時(shí)候?yàn)閡ndefined
然后開始檢查字母和用法，發(fā)現(xiàn)都沒有問題，就只有在 methods 函數(shù)里面也打印一下，這個(gè)時(shí)候發(fā)現(xiàn)打印就完全沒問題，也得到我想得到的了，那問題應(yīng)該就出在生命周期函數(shù) created 上了，去查閱資料，果不其然
這個(gè)時(shí)候就需要說一下兩個(gè)生命周期函數(shù)了：
created（實(shí)例創(chuàng)建成功，此時(shí) data 中的數(shù)據(jù)顯示出來了，dom還未生成）mounted（dom生成，data數(shù)據(jù)在模板中顯示出來）
如果在created方法里this.$refs[dom]去獲取dom節(jié)點(diǎn)是獲取不到的
因?yàn)閐om還沒有被渲染出來，而在mounted方法里是可以拿到的
Vuejs this.$refs 調(diào)用報(bào)undefined的處理
項(xiàng)目場(chǎng)景
Vue 2.6.10版本中，父組件獲取子組件問題。
問題描述
父組件調(diào)子組件方法報(bào)undefined找不到
父組件中使用子組件代碼 <UploadFile ref="refupload" ></UploadFile>
報(bào)錯(cuò)：
先console.log(this.$refs);發(fā)現(xiàn)外面沒有refupload，里面有對(duì)象，不是undefined。
然后直接通過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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求
這篇文章主要介紹了vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法
這篇文章主要介紹了解決iview多表頭動(dòng)態(tài)更改列元素發(fā)生的錯(cuò)誤的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了.eslintrc配置目錄及配置項(xiàng)的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue更多篩選項(xiàng)小組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue3如何將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖
這篇文章主要介紹了vue3實(shí)現(xiàn)將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
iview中實(shí)現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式
這篇文章主要介紹了iview中實(shí)現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用element-ui設(shè)置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue利用vue meta info設(shè)置每個(gè)頁面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個(gè)頁面的title與meta信息的相關(guān)資料,文中將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10