欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年05月13日 08:52:48   作者:木木木華  
Vue是一個以數(shù)據(jù)驅動、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關于vue父子組件傳值不能實時更新的解決方法,需要的朋友可以參考下

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

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

出現(xiàn)這個問題,可能有以下兩個原因:

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

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

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

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

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

② 利用watch監(jiān)聽數(shù)據(jù),若是數(shù)據(jù)變化,調用視圖渲染方法。

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

在項目中,將erchart中的生成儀表盤的數(shù)據(jù)封裝了一個子組件,父組件中傳給儀表盤一個初始值,后續(xù),調用后臺接口返回最新的數(shù)據(jù)傳給這個儀表盤組件的之后,發(fā)現(xiàn)儀表盤中的數(shù)據(jù)并沒有實時的更新。儀表盤如下圖:

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

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

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

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

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

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

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

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

這里就涉及到了第二種方法,設置watch監(jiān)聽,監(jiān)聽數(shù)據(jù),當子組件監(jiān)聽到數(shù)據(jù)發(fā)生改變時,調用方法。

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

 在這之后,我發(fā)現(xiàn)控制臺報錯了, ”TypeError: Cannot read property ‘getAttribute’ of undefined”,如下所示:

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

 依此,子組件數(shù)據(jù)就可以實時更新了。如下圖:

總結

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

相關文章

  • Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明

    Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明

    這篇文章主要介紹了Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • VUE PC端可拖動懸浮按鈕的實現(xiàn)代碼

    VUE PC端可拖動懸浮按鈕的實現(xiàn)代碼

    這篇文章主要介紹了VUE PC端可拖動懸浮按鈕的實現(xiàn)代碼,通過實例代碼介紹了父頁面引用的方法,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2024-02-02
  • 在Vue中使用icon 字體圖標的方法

    在Vue中使用icon 字體圖標的方法

    這篇文章主要介紹了在Vue中使用icon 字體圖標的方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • 基于vuejs實現(xiàn)一個todolist項目

    基于vuejs實現(xiàn)一個todolist項目

    這篇文章主要為大家詳細介紹了基于vuejs實現(xiàn)一個todolist項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn)

    vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn)

    Vue提供了一個h()函數(shù)用于創(chuàng)建vnodes,本文就來介紹一下vue用h()函數(shù)創(chuàng)建Vnodes的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2024-01-01
  • vue遍歷對象中的數(shù)組取值示例

    vue遍歷對象中的數(shù)組取值示例

    今天小編就為大家分享一篇vue遍歷對象中的數(shù)組取值示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 基于Electron+Vite快速構建Vue3桌面應用

    基于Electron+Vite快速構建Vue3桌面應用

    這篇文章主要介紹了如何基于Electron和Vite快速構建Vue3桌面應用,本文主要技術棧就是Vue3、vite、Electron,文中有詳細的代碼示例,需要的朋友可以參考下
    2023-07-07
  • 通過vue-cli來學習修改Webpack多環(huán)境配置和發(fā)布問題

    通過vue-cli來學習修改Webpack多環(huán)境配置和發(fā)布問題

    這篇文章主要介紹了隨著Vue-cli來'學'并'改'Webpack之多環(huán)境配置和發(fā)布的相關知識,本文將會根據(jù)一些實際的業(yè)務需求,先學習vue-cli生成的模版,然后在進行相關修改,感興趣的朋友一起跟著小編學習吧
    2017-12-12
  • VUE安裝使用教程詳解

    VUE安裝使用教程詳解

    這篇文章主要介紹了安裝使用VUE的教程,本文給大家提到了遇到的問題原因分析及解決方法,需要的朋友可以參考下
    2019-06-06
  • vscode 開發(fā)Vue項目的方法步驟

    vscode 開發(fā)Vue項目的方法步驟

    這篇文章主要介紹了vscode 開發(fā)Vue項目的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11

最新評論