vue中props赋值给data出现的问题及解决
目录
vue props赋值给data问题
vue 中父组件向子组件传递数据用 props, 但是子组件是无法修改它的。
如果子组件需要动态修改它就只能自造一个对应的 data 域。
比如：
components:{Tinymce},
props:['id','formDatas'],
data() {
return {
form: {
title: '',
title_type: '',
push_date: '',
source: '',
title_introduce: '',
title_content:'',
}
}
},
created(){
this.form = this.formDatas
},这样是无法把props的值传递给data里面，因为data()只会运行一次，所以要用watch来进行监听props里面内容的变化，然后对data里面进行赋值
watch:{
formDatas(news,olds){
this.form = news
}
}因此当父组件传递值给子组件的时候，watch就会监听到formDatas的变化，将新的值赋给你想要传值的data，然后进行改变。
props赋值给data 数据变化
问题：当组件props里的某个值（a）（a值要是对象引用类型的数据）赋给了data对象里的某个值 (b); 当a值发生了变化，b值还是最开始的a值, 但实际应该是b值是最新的a值
例如
<template>
</template>
<script>
export default {
name:'child '
props:{
a:{
type:Object
}
},
data(){
return{
b:this.a
}
},
mounted(){
console.log("b",this.b) //打印出来是a:{a1:1}
//a值改变后打印b值
console.log("b",this.b) //打印出来还是a:{a1:1}
}
}
</script>
<style>
</style>
<!-------------------------------------------------------->
<template>
<!---引用子组件--->
<child :a="a"></child>
</template>
<script>
export default {
data(){
return{
a:{
a1:1
}
}
},
mounted(){
//改变a值
this.a.a1 = 2
}
}
</script>
<style>
</style>原因：因为data深拷贝的props的值，data无法随着props的变化而更新；
解决：watch、computed可以解决
<template>
</template>
<script>
export default {
name:'child '
props:{
a:{
type:Object
}
},
data(){
return{
b:this.a
}
},
watch:{
a(val){
//当a值变化时
this.b = this.a
}
},
mounted(){
//a值改变后打印b值
console.log("b",this.b) //打印出来就是最新值了 a:{a1:2}
}
}
</script>
<style>
</style>以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
原文地址：https://blog.csdn.net/weixin_43848098/article/details/122079610
