快捷導(dǎo)航

vue父子組件傳值不能實(shí)時(shí)更新的解決方法

更新時(shí)間：2023年05月13日 08:52:48 作者：木木木華

Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于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è)類似于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ì)出現(xiàn)這個(gè)問(wèn)題。解決方法是：利用this.$nextTick()。this.$nextTick()將數(shù)據(jù)渲染方法放到dom渲染之后，這樣就不會(huì)出現(xiàn)這個(gè)問(wèn)題了。