Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題
更新時間：2022年10月18日 14:36:38 作者：長安有故里，安河橋有你
這篇文章主要介紹了Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
問題
最近在公司寫vue項目的時候，發(fā)現(xiàn)一個渲染問題，父組件傳給子組件的數(shù)據(jù)，當該數(shù)據(jù)在父組件的中發(fā)生改變的時候，子組件中的數(shù)據(jù)不會因其的改變而去改變。
原因
經上網(wǎng)查證得知，是因為父組件傳給子組件的數(shù)據(jù)是通過子組件的mounted階段進行的處理，才能通過data渲染到頁面上，從而更新。
但是數(shù)據(jù)發(fā)生變化的時候，mounted階段已經過了，所以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)框的關閉銷毀。
我的解決辦法
是用watch監(jiān)聽子組件接收的數(shù)據(jù)的變化，從而實現(xiàn)更新操作
?watch:{
? ? ? ? addshow(){
? ? ? ? ? ? this.addModelshow=this.addshow;
? ? ? ? }
? ? }網(wǎng)上還有另一種方法，使用的computed屬性，也可以。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue里面使用mui的彈出日期選擇插件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2021-01-01
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要給大家介紹了關于axios封裝與傳參的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
在vue中nextTick用法及nextTick 的原理是什么
這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個流行的前端框架，它提供了一種響應式的數(shù)據(jù)綁定機制，使得頁面的數(shù)據(jù)與頁面的 UI 組件之間能夠自動同步，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue源碼解析之事件機制原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關于vue2.x中$attrs和$listeners的相關資料,需要的朋友可以參考下2022-03-03
在Vue中使用xlsx庫可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關于vue中如何使用xlsx讀取excel文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue3+vite實現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題)
項目全線使用vue3的時候,自然使用的是配套更加契合的vite打包工具,于是自然而然會用到很多新的語法,本文給大家介紹了vue3+vite實現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題),需要的朋友可以參考下2024-04-04