欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue如何解決子組件data從props中無法動(dòng)態(tài)更新數(shù)據(jù)問題

 更新時(shí)間:2022年10月18日 14:36:38   作者:長安有故里,安河橋有你  
這篇文章主要介紹了Vue如何解決子組件data從props中無法動(dòng)態(tài)更新數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問題

最近在公司寫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)示例

    本文主要介紹了Vue3+cesium環(huán)境搭建的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-08-08
  • vue2.0構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)

    vue2.0構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)

    這篇文章主要為大家分享了vue2.0構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • vue3.2?reactive函數(shù)問題小結(jié)

    vue3.2?reactive函數(shù)問題小結(jié)

    reactive用來包裝一個(gè)對象,使其每個(gè)對象屬性都具有響應(yīng)性(也就是深層次響應(yīng)式),這篇文章主要介紹了vue3.2?reactive函數(shù)注意點(diǎn)及問題小結(jié),需要的朋友可以參考下
    2022-12-12
  • vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程

    vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程

    自定義指令是對普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • vue綜合組件間的通信詳解

    vue綜合組件間的通信詳解

    這篇文章主要為大家詳細(xì)介紹了vue綜合組件間的通信,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue & vue Cli 版本及對應(yīng)關(guān)系解讀

    vue & vue Cli 版本及對應(yīng)關(guān)系解讀

    這篇文章主要介紹了vue & vue Cli 版本及對應(yīng)關(guān)系,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)

    Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)

    這篇文章主要介紹了Vue如何優(yōu)雅地移除數(shù)組中的特定元素,文中介紹了單個(gè)去除和批量去除的操作方法,并通過代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
    2024-03-03
  • vue中的封裝常用工具類

    vue中的封裝常用工具類

    這篇文章主要介紹了vue中的封裝常用工具類,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(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)航欄和面包屑功能

    這篇文章主要介紹了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中配置流程

    vue模式history下在iis中配置流程

    這篇文章主要介紹了vue模式history下在iis中配置流程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04

最新評論