最近做項目，遇到個大坑，這會爬出來了，寫個總結，避免下次掉坑。

vue父子組件傳值不能實時更新問題，父組件將值傳給了子組件，但子組件顯示的值還是原來的初始值，并沒有實時更新，為什么會出現這種問題呢？

出現這個問題，可能有以下兩個原因：

一、 父組件沒有把值傳過去，子組件沒有獲取到最新的值。

二、子組件接收到最新的值了，但是沒有實時渲染到視圖上。

如果是第一種情況很簡單，核對傳的參數，確保把最新的值傳過去就可以了。

若是第二種情況，稍微有些麻煩，但也可以解決，主要有兩種解決方案：

① 利用v-if的重新渲染機制，獲取到值之后，將子組件重新渲染一遍。

② 利用watch監聽數據，若是數據變化，調用視圖渲染方法。

下面，結合項目的實際情況，具體分析這兩種方法。

在項目中，將erchart中的生成儀表盤的數據封裝了一個子組件，父組件中傳給儀表盤一個初始值，后續，調用后臺接口返回最新的數據傳給這個儀表盤組件的之后，發現儀表盤中的數據并沒有實時的更新。儀表盤如下圖：

首先，利用第①種方法，利用v-if渲染機制

設置一個參數reRender。設置v-if=“reRender”，并將reRender初始值設置為false，從后臺獲取數據之后，將reRender=true。

這樣就能夠將最新的數據渲染到子組件的視圖中了。但這樣，如果我在同一個頁面中調用了很多次這個子組件，生成多個儀表盤，就需要設置很多個類似于reRender的屬性。

那么有的小可愛就提出來了，我設置一個reRender屬性，然后幾個子組件共用這個屬性不就可以了嗎，幾個后臺接口調完更新數據之后在統一將reRender=true。

這種方法，我嘗試過了，不可以，我不知道原因。

只有將reRender=true放在那個調接口的方法里，獲取到后臺數據之后，才可以。嘗試了網上提出的強制更新的方法，也不行。

所以，遇到這種一個頁面調用多個這種組件的情況，使用v-if就很繁瑣。

若是，別人封裝了這么一個組件，數據更新的時候還要利用v-if重新渲染一下，那就感覺這個組件可能封裝的不是太好，所以，咱們還是完善子組件。

這里就涉及到了第二種方法，設置watch監聽，監聽數據，當子組件監聽到數據發生改變時，調用方法。

監聽傳的數據，這里面用到了兩個屬性immediate和deep，在watch中，不會監聽初始值，只有當值改變時才會執行handler函數。但是，我們想要在最初賦值的時候，也執行handler函數，就需要用到immediate:true。而普通監聽只能監聽字符串、數字等值，要想監聽到對象中某個屬性的變化，就需要用到深度監聽deep:true。

在這之后，我發現控制臺報錯了， ”TypeError: Cannot read property ‘getAttribute’ of undefined”，如下所示：

后面查了一些資料是因為：在vue中，數據和dom渲染是異步的，當dom還沒渲染，卻用數據去賦值的話，就會出現這個問題。解決方法是：利用this.$nextTick()。this.$nextTick()將數據渲染方法放到dom渲染之后，這樣就不會出現這個問題了。

依此，子組件數據就可以實時更新了。如下圖：

總結

到此這篇關于vue父子組件傳值不能實時更新的解決方法的文章就介紹到這了,更多相關vue父子組件傳值不實時更新內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！