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 @ 2021-08-23 09:28  Tozhang  阅读(5616)  评论(0编辑  收藏  举报