vue父子組件傳值不能實(shí)時(shí)更新的解決方法
最近做項(xiàng)目,遇到個(gè)大坑,這會(huì)爬出來(lái)了,寫(xiě)個(gè)總結(jié),避免下次掉坑。
vue父子組件傳值不能實(shí)時(shí)更新問(wèn)題,父組件將值傳給了子組件,但子組件顯示的值還是原來(lái)的初始值,并沒(méi)有實(shí)時(shí)更新,為什么會(huì)出現(xiàn)這種問(wèn)題呢?
出現(xiàn)這個(gè)問(wèn)題,可能有以下兩個(gè)原因:
一、 父組件沒(méi)有把值傳過(guò)去,子組件沒(méi)有獲取到最新的值。
二、子組件接收到最新的值了,但是沒(méi)有實(shí)時(shí)渲染到視圖上。
如果是第一種情況很簡(jiǎn)單,核對(duì)傳的參數(shù),確保把最新的值傳過(guò)去就可以了。
若是第二種情況,稍微有些麻煩,但也可以解決,主要有兩種解決方案:
① 利用v-if的重新渲染機(jī)制,獲取到值之后,將子組件重新渲染一遍。
② 利用watch監(jiān)聽(tīng)數(shù)據(jù),若是數(shù)據(jù)變化,調(diào)用視圖渲染方法。
下面,結(jié)合項(xiàng)目的實(shí)際情況,具體分析這兩種方法。
在項(xiàng)目中,將erchart中的生成儀表盤(pán)的數(shù)據(jù)封裝了一個(gè)子組件,父組件中傳給儀表盤(pán)一個(gè)初始值,后續(xù),調(diào)用后臺(tái)接口返回最新的數(shù)據(jù)傳給這個(gè)儀表盤(pán)組件的之后,發(fā)現(xiàn)儀表盤(pán)中的數(shù)據(jù)并沒(méi)有實(shí)時(shí)的更新。儀表盤(pán)如下圖:
首先,利用第①種方法,利用v-if渲染機(jī)制
設(shè)置一個(gè)參數(shù)reRender。設(shè)置v-if=“reRender”,并將reRender初始值設(shè)置為false,從后臺(tái)獲取數(shù)據(jù)之后,將reRender=true。
這樣就能夠?qū)⒆钚碌臄?shù)據(jù)渲染到子組件的視圖中了。但這樣,如果我在同一個(gè)頁(yè)面中調(diào)用了很多次這個(gè)子組件,生成多個(gè)儀表盤(pán),就需要設(shè)置很多個(gè)類(lèi)似于reRender的屬性。
那么有的小可愛(ài)就提出來(lái)了,我設(shè)置一個(gè)reRender屬性,然后幾個(gè)子組件共用這個(gè)屬性不就可以了嗎,幾個(gè)后臺(tái)接口調(diào)完更新數(shù)據(jù)之后在統(tǒng)一將reRender=true。
這種方法,我嘗試過(guò)了,不可以,我不知道原因。
只有將reRender=true放在那個(gè)調(diào)接口的方法里,獲取到后臺(tái)數(shù)據(jù)之后,才可以。嘗試了網(wǎng)上提出的強(qiáng)制更新的方法,也不行。
所以,遇到這種一個(gè)頁(yè)面調(diào)用多個(gè)這種組件的情況,使用v-if就很繁瑣。
若是,別人封裝了這么一個(gè)組件,數(shù)據(jù)更新的時(shí)候還要利用v-if重新渲染一下,那就感覺(jué)這個(gè)組件可能封裝的不是太好,所以,咱們還是完善子組件。
這里就涉及到了第二種方法,設(shè)置watch監(jiān)聽(tīng),監(jiān)聽(tīng)數(shù)據(jù),當(dāng)子組件監(jiān)聽(tīng)到數(shù)據(jù)發(fā)生改變時(shí),調(diào)用方法。
監(jiān)聽(tīng)傳的數(shù)據(jù),這里面用到了兩個(gè)屬性immediate和deep,在watch中,不會(huì)監(jiān)聽(tīng)初始值,只有當(dāng)值改變時(shí)才會(huì)執(zhí)行handler函數(shù)。但是,我們想要在最初賦值的時(shí)候,也執(zhí)行handler函數(shù),就需要用到immediate:true。而普通監(jiān)聽(tīng)只能監(jiān)聽(tīng)字符串、數(shù)字等值,要想監(jiān)聽(tīng)到對(duì)象中某個(gè)屬性的變化,就需要用到深度監(jiān)聽(tīng)deep:true。
在這之后,我發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)了, ”TypeError: Cannot read property ‘getAttribute’ of undefined”,如下所示:
后面查了一些資料是因?yàn)椋涸趘ue中,數(shù)據(jù)和dom渲染是異步的,當(dāng)dom還沒(méi)渲染,卻用數(shù)據(jù)去賦值的話(huà),就會(huì)出現(xiàn)這個(gè)問(wèn)題。解決方法是:利用this.$nextTick()。this.$nextTick()將數(shù)據(jù)渲染方法放到dom渲染之后,這樣就不會(huì)出現(xiàn)這個(gè)問(wèn)題了。
依此,子組件數(shù)據(jù)就可以實(shí)時(shí)更新了。如下圖:
總結(jié)
到此這篇關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法的文章就介紹到這了,更多相關(guān)vue父子組件傳值不實(shí)時(shí)更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說(shuō)明
這篇文章主要介紹了Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過(guò)實(shí)例代碼介紹了父頁(yè)面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
這篇文章主要為大家詳細(xì)介紹了基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn)
Vue提供了一個(gè)h()函數(shù)用于創(chuàng)建vnodes,本文就來(lái)介紹一下vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01基于Electron+Vite快速構(gòu)建Vue3桌面應(yīng)用
這篇文章主要介紹了如何基于Electron和Vite快速構(gòu)建Vue3桌面應(yīng)用,本文主要技術(shù)棧就是Vue3、vite、Electron,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07通過(guò)vue-cli來(lái)學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問(wèn)題
這篇文章主要介紹了隨著Vue-cli來(lái)'學(xué)'并'改'Webpack之多環(huán)境配置和發(fā)布的相關(guān)知識(shí),本文將會(huì)根據(jù)一些實(shí)際的業(yè)務(wù)需求,先學(xué)習(xí)vue-cli生成的模版,然后在進(jìn)行相關(guān)修改,感興趣的朋友一起跟著小編學(xué)習(xí)吧2017-12-12vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟
這篇文章主要介紹了vscode 開(kāi)發(fā)Vue項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11