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