解決vue里碰到 $refs 的問題的方法
本篇文章介紹了vue里碰到 $refs 的問題，分享給大家，希望能幫助大家解決問題
記錄困惑自己一個(gè)簡(jiǎn)單的問題...(瞬間感覺官方文檔的強(qiáng)大)
在自己做的一個(gè)項(xiàng)目中，遇到一個(gè)列表頁(yè)，根據(jù)id能進(jìn)入詳情頁(yè)（動(dòng)態(tài)匹配路由），詳情頁(yè)是單獨(dú)的一個(gè)組件，在這個(gè)詳情的組件里，我想獲取內(nèi)容給你區(qū)域的高度，以此來判斷對(duì)底部按鈕顯示的位置，但是在ref的時(shí)候，就是獲取不到該標(biāo)簽，在mounted鉤子函數(shù)里打印 this.$refs，也能看到這個(gè)值，但就就是點(diǎn)不出來（this.$refs這個(gè)對(duì)象里這個(gè)值，但是就是獲取不到，我打印的是個(gè)假值?）
在mounted函數(shù)，打印的每次都是undefined。郁悶啊...為什么啊...
重新起個(gè)項(xiàng)目看看..
全部正常的打印,我擦...蒙蔽了...
好吧，網(wǎng)上看看有沒有遇到類似的...看來是我自己比較挫，沒有什么資源，看來還是自己的問題，這個(gè)時(shí)候，就是看文檔了...
感覺自己沒有沒有什么錯(cuò)啊,是按上面做的...，但是作者特別強(qiáng)調(diào)了$refs 不是響應(yīng)式的。額，想想...不對(duì)...,我那個(gè)組件好像就是響應(yīng)式，或根據(jù)id來顯示不同的數(shù)據(jù)。額，好吧.。這里ref只能在根組件，才能獲取，其他的都獲取不到。但是能打印出來，能看到...
雖然知道了淺顯的原因所在，但是自己的問題沒有解決，好吧，那就暴力點(diǎn)吧.直接操作dom。通過控制dom來獲取頁(yè)面的高度。
總結(jié)： 之前就有個(gè)人和我說過，可以把$refs 當(dāng)做id來看，id是唯一的，是不變的。嗯，$refs 不是響應(yīng)式的。 挺像...
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了Vue?編譯器optimize源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)紹了vue2.0全局組件之pdf的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題
這篇文章主要介紹了VueJS 組件參數(shù)名命名與組件屬性轉(zhuǎn)化問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
vue仿element實(shí)現(xiàn)分頁(yè)器效果
這篇文章主要介紹了vue仿element實(shí)現(xiàn)分頁(yè)器效果，實(shí)現(xiàn)思路是定一個(gè)值foldPage, 意為當(dāng)前最多顯示的標(biāo)簽數(shù),當(dāng)總頁(yè)數(shù)超過即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2)，具體實(shí)例代碼大家參考下本文2018-09-09
vue2使用keep-alive緩存多層列表頁(yè)的方法
今天小編就為大家分享一篇vue2使用keep-alive緩存多層列表頁(yè)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js中的插槽（slot）是一種機(jī)制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10