Vue中props赋值给data导致的问题如何有效解决？

本文共计543个文字，预计阅读时间需要3分钟。

目录 + Vue + props赋值给data问题 + props赋值给data + 数据变化 + 例如 + Vue + props赋值给data问题 + Vue + 中父组件向子组件传递数据用props，但子组件是无法修改它的。 + 如果子组件需要动态修改它，就只能自顶向下修改。

目录

• vue props赋值给data问题
• 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。