Vue如何解決子組件data從props中無法動(dòng)態(tài)更新數(shù)據(jù)問題
問題
最近在公司寫vue項(xiàng)目的時(shí)候,發(fā)現(xiàn)一個(gè)渲染問題,父組件傳給子組件的數(shù)據(jù),當(dāng)該數(shù)據(jù)在父組件的中發(fā)生改變的時(shí)候,子組件中的數(shù)據(jù)不會因其的改變而去改變。
原因
經(jīng)上網(wǎng)查證得知,是因?yàn)楦附M件傳給子組件的數(shù)據(jù)是通過子組件的mounted階段進(jìn)行的處理,才能通過data渲染到頁面上,從而更新。
但是數(shù)據(jù)發(fā)生變化的時(shí)候,mounted階段已經(jīng)過了,所以data捕獲不到數(shù)據(jù)的更新,從而無法更新
示例
//父組件 <add-model :addshow='addshow' ></add-model> //子組件 <template> ?? ?<div> ?? ??? ?<Modal ?v-model="addModelshow"> ?? ??? ?</Modal> ?? ?</div> </template> export default { ?? ?props:{ ? ? ? ? addshow:{ ? ? ? ? ? ? type:Boolean, ? ? ? ? ? ? required:true ? ? ? ? } ? ? }, ? ? data(){ ? ? ?? ?return { ? ? ?? ??? ?addModelshow:this.addshow, ? ? ?? ?} ? ? } }
在上述代碼中,如果控制addshow的true或者false,是無法控制子組件中的模態(tài)框的關(guān)閉銷毀。
我的解決辦法
是用watch監(jiān)聽子組件接收的數(shù)據(jù)的變化,從而實(shí)現(xiàn)更新操作
?watch:{ ? ? ? ? addshow(){ ? ? ? ? ? ? this.addModelshow=this.addshow; ? ? ? ? } ? ? }
網(wǎng)上還有另一種方法,使用的computed屬性,也可以。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例
本文主要介紹了Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08vue2.0構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)
這篇文章主要為大家分享了vue2.0構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04vue3.2?reactive函數(shù)問題小結(jié)
reactive用來包裝一個(gè)對象,使其每個(gè)對象屬性都具有響應(yīng)性(也就是深層次響應(yīng)式),這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下2022-12-12vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下2023-02-02vue & vue Cli 版本及對應(yīng)關(guān)系解讀
這篇文章主要介紹了vue & vue Cli 版本及對應(yīng)關(guān)系,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
這篇文章主要介紹了Vue如何優(yōu)雅地移除數(shù)組中的特定元素,文中介紹了單個(gè)去除和批量去除的操作方法,并通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-03-03vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能,基于一個(gè)新建的Vue3項(xiàng)目上實(shí)現(xiàn),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01