解決vue里碰到 $refs 的問題的方法
本篇文章介紹了vue里碰到 $refs 的問題，分享給大家，希望能幫助大家解決問題
記錄困惑自己一個簡單的問題...(瞬間感覺官方文檔的強大)
在自己做的一個項目中，遇到一個列表頁，根據(jù)id能進入詳情頁（動態(tài)匹配路由），詳情頁是單獨的一個組件，在這個詳情的組件里，我想獲取內(nèi)容給你區(qū)域的高度，以此來判斷對底部按鈕顯示的位置，但是在ref的時候，就是獲取不到該標(biāo)簽，在mounted鉤子函數(shù)里打印 this.$refs，也能看到這個值，但就就是點不出來（this.$refs這個對象里這個值，但是就是獲取不到，我打印的是個假值?）
在mounted函數(shù)，打印的每次都是undefined。郁悶啊...為什么啊...
重新起個項目看看..
全部正常的打印,我擦...蒙蔽了...
好吧，網(wǎng)上看看有沒有遇到類似的...看來是我自己比較挫，沒有什么資源，看來還是自己的問題，這個時候，就是看文檔了...
感覺自己沒有沒有什么錯啊,是按上面做的...，但是作者特別強調(diào)了$refs 不是響應(yīng)式的。額，想想...不對...,我那個組件好像就是響應(yīng)式，或根據(jù)id來顯示不同的數(shù)據(jù)。額，好吧.。這里ref只能在根組件，才能獲取，其他的都獲取不到。但是能打印出來，能看到...
雖然知道了淺顯的原因所在，但是自己的問題沒有解決，好吧，那就暴力點吧.直接操作dom。通過控制dom來獲取頁面的高度。
總結(jié)： 之前就有個人和我說過，可以把$refs 當(dāng)做id來看，id是唯一的，是不變的。嗯，$refs 不是響應(yīng)式的。 挺像...
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑
有一些驗證不是通過input select這樣的受控組件來觸發(fā)驗證條件的 ,可以通過自定義驗證的方法來觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑的相關(guān)資料,需要的朋友可以參考下2023-02-02
解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
buildAdmin開源項目引入四種圖標(biāo)方式詳解
這篇文章主要為大家介紹了buildAdmin開源項目引入四種圖標(biāo)方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
require是node中的一個方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08
vue深拷貝的三種實現(xiàn)方式：1、通過遞歸方式實現(xiàn)深拷貝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法實現(xiàn)深拷貝,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
vue3+ts實現(xiàn)一個表單組件的詳細(xì)代碼
這篇文章主要介紹了vue3+ts實現(xiàn)一個表單組件的詳細(xì)代碼,確保通過axios調(diào)用后端接口來獲取省市區(qū)和街道數(shù)據(jù),并在選擇省市區(qū)時加載相應(yīng)的街道數(shù)據(jù),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue3中引入Pinia存儲庫使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能
這篇文章主要為大家詳細(xì)介紹了vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Vue自定義指令實現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實現(xiàn)checkbox全選功能的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02