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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM