vue父组件数据更新,子组件没有变化。

原文:vue父组件数据更新,子组件没有变化。_越来越好-CSDN博客_vue数据更新子组件不更新

在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,过一段时间后重新赋值,则发现子组件里面数据没有更新,这个时候需要在子组件中加入watch 进行数据监听

复制代码
父组件
 
 
<div :parenData ="datas"></div>
 
<script>
data(){
  return{
   datas:"1"
 }
},
methods:{
  changeData(){
    this.datas= "2";
 }
},
mounted(){
  let that = this;
  settimeout(()=>{
    that.changeData();
  });
}
</script>
 
子组件
 
<div>{{msg}}</div>
 
<script>
data(){
  return{
    msg:""
  }
},
watch:{
    parendData(n,o){ //n为新值,o为旧值;
      this.msg = n;
    }
},
props:["parendData"],
mounted(){
  this.msg = this.parendData;
}
 
 
</script>
复制代码

 

posted @   Tozhang  阅读(5693)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示