Vue如何解决子组件data从props中无法动态更新数据问题
更新时间：2022年10月18日 14:36:38 作者：长安有故里，安河桥有你
这篇文章主要介绍了Vue如何解决子组件data从props中无法动态更新数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
问题
最近在公司写vue项目的时候，发现一个渲染问题，父组件传给子组件的数据，当该数据在父组件的中发生改变的时候，子组件中的数据不会因其的改变而去改变。
原因
经上网查证得知，是因为父组件传给子组件的数据是通过子组件的mounted阶段进行的处理，才能通过data渲染到页面上，从而更新。
但是数据发生变化的时候，mounted阶段已经过了，所以data捕获不到数据的更新，从而无法更新
示例
//父组件
<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,是无法控制子组件中的模态框的关闭销毁。
我的解决办法
是用watch监听子组件接收的数据的变化，从而实现更新操作
watch:{
addshow(){
this.addModelshow=this.addshow;
}
}网上还有另一种方法，使用的computed属性，也可以。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue里面使用mui的弹出日期选择插件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue3 watch和watchEffect的使用以及有哪些区别
这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2021-01-01
vue+element-ui JYAdmin后台管理系统模板解析
这篇文章主要介绍了vue+element-ui JYAdmin后台管理系统模板解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要给大家介绍了关于axios封装与传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
在vue中nextTick用法及nextTick 的原理是什么
这篇文章主要介绍了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一个流行的前端框架，它提供了一种响应式的数据绑定机制，使得页面的数据与页面的 UI 组件之间能够自动同步，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue源码解析之事件机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧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实现低版本浏览器兼容的解决方案(出现白屏问题)
项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下2024-04-04
最新评论