vue 子組件watch監(jiān)聽不到prop的解決
問題描述
在vue項目中,父組件通過prop給子組件傳值時,如果prop值是從服務(wù)器端獲取,則父組件可能會傳給子組件一個默認(rèn)值(服務(wù)端數(shù)據(jù)還未及時獲取),那么,我們就需要實時watch這個prop值,一旦prop值有更新,將立即通知子組件更新。
解決方案
watch: { levelDetail: { immediate: true, // 很重要?。?! handler (val) { this.levelPersonal = !val ? {} : val // console.log('action Value:', val, this.levelPersonal) } } },
官方文檔
vue-watch 參考文檔
補充知識:vue父組件props參數(shù)太大時子組件created取不到數(shù)據(jù)-解決方法
問題:
父組件調(diào)用子組件:
<mk-form :list="formList" :formvalue="formvalue"></mk-form>
其中的formList數(shù)據(jù)是用ajax調(diào)用的,數(shù)據(jù)比較大,應(yīng)該有些延遲
子組件的created中調(diào)用props時,輸出的是默認(rèn)數(shù)據(jù):
輸出:
解決方法:
第一種:加上 v-if 來判斷數(shù)據(jù)是佛加載完成了,加載完了再渲染:
<mk-form v-if="formList!=null" :list="formList" :formvalue="formvalue"></mk-form>
第二種:用 setTimeout 來做延遲,但這樣的方法不準(zhǔn)確,應(yīng)該視情況使用
其實兩種方法都應(yīng)該視情況來使用。
以上這篇vue 子組件watch監(jiān)聽不到prop的解決就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例
前端上傳大文件、視頻的時候會出現(xiàn)超時、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例,感興趣的可以了解一下2023-11-11Vue項目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07