vue中this.$refs的坑及解決
vue this.$refs的坑
在開發(fā)中，有時(shí)需要使用到this.$refs ，用于操作真實(shí)的DOM節(jié)點(diǎn)。
說一說我在使用的時(shí)候，在開發(fā)時(shí)碰到了一個(gè)小需求，需要子組件向父組件傳參，而且是不需要通過事件傳遞的，一開始使用this.$emit()來寫的，但是一直沒有接受到參數(shù)，于是放棄了使用this.$emit()的使用。
于是，使用了在父組件中調(diào)用子組件的方法，來獲取傳遞的參數(shù)。但是還是沒有獲取到傳遞過來的參數(shù)。
以下三點(diǎn)小坑坑
1、使用this.$refs如果要在mouend()中使用，必須要在this.$nextTick(()=>{ } ) 這里面實(shí)現(xiàn)，要不是找不到ref，原因是mouned（）之后，BOM節(jié)點(diǎn)還沒有完全掛載上，于是找不到定義的ref。
2、可以直接在updata()的生命周期函數(shù)中使用，不用寫this.$nextTick(()=>{ } )
3、在methods:{ } 方法中使用，也需要使用this.$nextTick(()=>{ } ) 等到頁面完全渲染完畢之后在調(diào)用即可
vue的坑 this.refs為空
我們在用vue的時(shí)候，會(huì)遇到一些坑，比如我們使用 this.$refs 獲取不到值，頁面明明有啊
百思不得其解……原來這個(gè)跟Vue的鉤子有關(guān)系
總結(jié)來說
1、必須要等頁面中的ref子組件加載完畢，才可以獲取到
2、在mounted之前的鉤子函數(shù)中獲取不到
3、組件在v-if為false的父節(jié)點(diǎn)下，導(dǎo)致這個(gè)子組件未渲染，也是導(dǎo)致獲取不到的因素，不要忽視哦
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單購物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具
這篇文章主要為大家介紹了vue項(xiàng)目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Element中el-table動(dòng)態(tài)合并單元格(span-method方法)
本文主要介紹了Element中el-table動(dòng)態(tài)合并單元格(span-method方法)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vant?如何修改van-collapse-item右側(cè)圖標(biāo)
這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目自適應(yīng)屏幕分辨率實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目自適應(yīng)屏幕分辨率實(shí)現(xiàn)的相關(guān)資料,作為前端人員,為了適配各種型號(hào)的電腦、手機(jī),我們往往離不開屏幕分辨率的適配,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇基于element-ui的rules中正則表達(dá)式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了解決vue中的無限循環(huán)問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中computed、methods與watch的區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中computed、methods與watch區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在我們?nèi)粘ｉ_發(fā)中,有些組件里面加載非常慢,導(dǎo)致我們路由跳轉(zhuǎn)的時(shí)候回出現(xiàn)卡頓情況,這篇文章主要介紹了Vue3:?Suspense異步加載組件,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue安裝less-loader依賴失敗問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08