项目场景:
提示:这里简述项目相关背景:
例如:
查看列表中的某一条,显示这条的详情信息(这里的详情是一个弹框子组件)–后台管理系统
问题描述
提示:这里描述项目中遇到的问题:
在父子组件传参时,父组件将值传到子组件后,子组件进行数据展示,在第一次传参时可以正常显示,第二次传值子组件的值就不更新了。
问题:在于父子组件渲染机制。子组件里的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频繁的创建销毁子组件;