父子组件传值,子组件数据不更新

项目场景:

提示:这里简述项目相关背景:

例如:
查看列表中的某一条,显示这条的详情信息(这里的详情是一个弹框子组件)–后台管理系统

问题描述

提示:这里描述项目中遇到的问题:

在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,第二次传值子组件的值就不更新了。

问题:在于父子组件渲染机制。子组件里的created只会在初始化执行一次,虽然第二次父组件的数据变化了,但是created不会再执行了,以至于在created里面的赋值就不会有响应了;

父组件
 
 
<div :parenData ="datas"></div>
 
<script>
data(){
  return{
   datas:"1"
 }
},
methods:{
  changeData(){
    this.datas= "2";
 }
}
</script>





子组件
<div>{{msg}}</div>
 
<script>
data(){
  return{
    msg:""
  }
},
//子组件里的created只会在初始化执行一次,虽然第二次父组件的数据变化了,但是this.msg并没有赋值最新的数据
created(){
 this.msg = parendData;
},
props:["parendData"],
//解决方法 数据监听并且重新赋值
watch:{
    parendData(n,o){ //n为新值,o为旧值;
      this.msg = n;
    }
},
</script>

原因分析:

提示:这里填写问题的分析:

我们知道父子组件遵循单向数据流。出现这种原因是 你的子组件里用了n变量去接收与父组件通信的t,只会在第一次初始化子组件的时候拿到值,如果你直接用t就可以观察到变化了,想要继续使用n,你需要动态监听t的变化并给n赋值。原因清楚上代码!


解决方案:

提示:这里填写该问题的具体解决方案:

例如:1.监听父组件传过来的值; 数据监听并且重新赋值
2.还有一种,就是用v-if频繁的创建销毁子组件;

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一行代码上晴天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值