Vue組件傳值異步問題子組件拿到數(shù)據(jù)較慢解決
問題出現(xiàn)
之前寫靜態(tài)頁面的時候，直接父向子傳值，是指節(jié)能渲染出父組件給子組件的值，但是加上請求后，就會出現(xiàn)請求過慢。就是在組件創(chuàng)建和渲染完畢時，子組件的值才拿到，子組件并沒有實時更新模版（災(zāi)難始終慢我一步）
原因分析
子組件中的 created 、mounted 只執(zhí)行一次，在富組件初始化時，已經(jīng)給子組件傳了一個空值，導(dǎo)致異步請求數(shù)據(jù)發(fā)生變化時，子組件的值不再變化
在父組件中，獲取數(shù)據(jù)時會有幾秒鐘的時間延遲，而異步請求不會阻塞后續(xù)代碼，所以導(dǎo)致子組件通過props接受數(shù)據(jù)時拿到的是空數(shù)據(jù)，通過打印結(jié)果顯示先執(zhí)行子組件中props中的代碼，導(dǎo)致數(shù)據(jù)無法渲染。
解決辦法
就是沒有發(fā)請求拿到數(shù)據(jù)之前，不讓他創(chuàng)建子組件并傳值，因此給其加 v-if 指令來限制他是否能創(chuàng)建子組件，類似于節(jié)流的思想。
在父組件中的子組件，通過v-if判斷接口請求的數(shù)據(jù)是否不為0或者不為空，因為v-if是通過創(chuàng)建DOM顯示的，此時通過判斷如果子組件有數(shù)據(jù)的話才傳數(shù)據(jù)
data 數(shù)據(jù)里面
list : false || null
請求方法里
async getUserinfo() {
const { data : res } = await getUserinfo(userid:this.userid)
this.list = res.data
}
模版子組件處
<Userinfo :list = 'list' v-if = 'list'/> <Userinfo :list = 'list' v-if = 'list && list.length > 0'/>
以上就是Vue組件傳值異步問題--子組件拿到數(shù)據(jù)較慢的詳細內(nèi)容，更多關(guān)于Vue組件傳值異步問題的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來實現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
v-if和v-show可能是日常開發(fā)中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧2018-03-03
vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在IDEA中創(chuàng)建vue hello-world項目全過程
用戶分享了在IDEA中搭建Vue HelloWorld項目的簡要步驟：安裝Node.js和npm,配置淘寶鏡像加速,安裝Vue插件,創(chuàng)建項目并指定名稱,運行npm run serve啟動服務(wù),最終通過本地8080端口訪問項目2025-09-09
這篇文章主要介紹了vue和thymeleaf相結(jié)合的注意事項詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細介紹了Vue如何使用PDF.js實現(xiàn)瀏覽pdf文件功能，文中的實現(xiàn)步驟講解詳細，具有一定的借鑒價值，需要的可以參考一下2023-04-04
這篇文章主要介紹了vue3中如何使用ts，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue實現(xiàn)移動端項目多行文本溢出省略功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue.js?3.0?為了解決?Object.defineProperty?的這些缺陷，使用?Proxy?API?重寫了響應(yīng)式部分，并獨立維護和發(fā)布整個?reactivity?庫，這篇文章主要介紹了vue3?響應(yīng)式的實現(xiàn)原理,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue頭部導(dǎo)航動態(tài)點擊處理方法,文中通過一段示例代碼給大家介紹了vue實現(xiàn)動態(tài)頭部的方法，需要的朋友可以參考下2018-11-11