Vue中獲取this.$refs為undefined的問題
Vue獲取this.$refs為undefined
最近在修改bug的時候，需要獲取到dom元素進行操作
條件是通過屏幕寬度來改變獲取到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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue如何使用async、await實現(xiàn)同步請求
這篇文章主要介紹了vue如何使用async、await實現(xiàn)同步請求,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法
這篇文章主要介紹了解決iview多表頭動態(tài)更改列元素發(fā)生的錯誤的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了.eslintrc配置目錄及配置項的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue更多篩選項小組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue3如何將html元素變成canvas(海報生成),進行圖片保存/截圖
這篇文章主要介紹了vue3實現(xiàn)將html元素變成canvas(海報生成),進行圖片保存/截圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
iview中實現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式
這篇文章主要介紹了iview中實現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
使用element-ui設(shè)置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue利用vue meta info設(shè)置每個頁面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個頁面的title與meta信息的相關(guān)資料,文中將實現(xiàn)的方法介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10