問題描述

在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è)參考，也希望大家多多支持好吧啦網(wǎng)。