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)閉銷毀。
我的解決辦法
是用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)文章
今天小編就為大家分享一篇vue里面使用mui的彈出日期選擇插件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2021-01-01
vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要給大家介紹了關(guān)于axios封裝與傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
在vue中nextTick用法及nextTick 的原理是什么
這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個(gè)流行的前端框架，它提供了一種響應(yīng)式的數(shù)據(jù)綁定機(jī)制，使得頁(yè)面的數(shù)據(jù)與頁(yè)面的 UI 組件之間能夠自動(dòng)同步，需要的朋友可以參考下2023-04-04
簡(jiǎn)單說(shuō)說(shuō)如何使用vue-router插件的方法
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue源碼解析之事件機(jī)制原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
簡(jiǎn)單聊聊vue2.x的$attrs和$listeners
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫(xiě)入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題)
項(xiàng)目全線使用vue3的時(shí)候,自然使用的是配套更加契合的vite打包工具,于是自然而然會(huì)用到很多新的語(yǔ)法,本文給大家介紹了vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題),需要的朋友可以參考下2024-04-04