vue 子組件watch監(jiān)聽不到prop的解決
問題描述
在vue項(xiàng)目中，父組件通過prop給子組件傳值時(shí)，如果prop值是從服務(wù)器端獲取，則父組件可能會(huì)傳給子組件一個(gè)默認(rèn)值(服務(wù)端數(shù)據(jù)還未及時(shí)獲取)，那么，我們就需要實(shí)時(shí)watch這個(gè)prop值，一旦prop值有更新，將立即通知子組件更新。
解決方案
watch: {
levelDetail: {
immediate: true, // 很重要?。?！
handler (val) {
this.levelPersonal = !val ? {} : val
// console.log('action Value:', val, this.levelPersonal)
}
}
},
官方文檔
vue-watch 參考文檔
補(bǔ)充知識(shí)：vue父組件props參數(shù)太大時(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時(shí)，輸出的是默認(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)該視情況使用
其實(shí)兩種方法都應(yīng)該視情況來使用。
以上這篇vue 子組件watch監(jiān)聽不到prop的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue 幸運(yùn)大轉(zhuǎn)盤實(shí)現(xiàn)思路詳解,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue3自定義dialog、modal組件的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了vue.js封裝switch開關(guān)組件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家介紹了VUE render函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11
懶加載是一種網(wǎng)頁優(yōu)化技術(shù)，也被稱為延遲加載，它的主要目的是在網(wǎng)頁加載時(shí)，只加載當(dāng)前可見區(qū)域內(nèi)的內(nèi)容，而延遲加載其他不可見區(qū)域的內(nèi)容，從而提高網(wǎng)頁的加載速度和性能，這篇文章主要介紹了vue圖片懶加載的兩種方法,需要的朋友可以參考下2023-07-07
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue搭建后臺(tái)系統(tǒng)需要做的幾點(diǎn)，文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07