vue 子組件watch監(jiān)聽不到prop的解決
問題描述
在vue項(xiàng)目中，父組件通過prop給子組件傳值時，如果prop值是從服務(wù)器端獲取，則父組件可能會傳給子組件一個默認(rèn)值(服務(wù)端數(shù)據(jù)還未及時獲取)，那么，我們就需要實(shí)時watch這個prop值，一旦prop值有更新，將立即通知子組件更新。
解決方案
watch: {
levelDetail: {
immediate: true, // 很重要?。?！
handler (val) {
this.levelPersonal = !val ? {} : val
// console.log('action Value:', val, this.levelPersonal)
}
}
},
官方文檔
vue-watch 參考文檔
補(bǔ)充知識：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)該視情況使用
其實(shí)兩種方法都應(yīng)該視情況來使用。
以上這篇vue 子組件watch監(jiān)聽不到prop的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue3從0搭建Vite打包組件庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
select的change方法傳遞多個參數(shù)的方法詳解
element-ui中的select,checkbox等組件的change方法的回調(diào)函數(shù)只有當(dāng)前選擇的val,如果想再傳入自定義參數(shù)怎么辦,本文給大家分享select的change方法如何傳遞多個參數(shù),感興趣的朋友一起看看吧2024-02-02
element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue數(shù)據(jù)變化監(jiān)聽錯誤的常見原因與解決方案
在?Vue.js?開發(fā)中,watch?是一個強(qiáng)大的工具,用于監(jiān)聽數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,然而,許多開發(fā)者在使用?watch?時會遇到數(shù)據(jù)變化未被正確監(jiān)聽的問題,這可能導(dǎo)致程序邏輯錯誤或視圖更新失敗,本文將探討這些問題的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue使用localStorage存儲數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue使用localStorage存儲數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，這篇文章主要介紹了Vue3?中自定義插件的實(shí)現(xiàn),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue3使用element-plus組件不顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了使用vue實(shí)現(xiàn)自定義多選與單選的答題功能,vue組件中在表單方面提供了一個v-model指令，非常好用，具體實(shí)現(xiàn)過程大家跟隨腳本之家小編一起看看吧2018-07-07
這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09