Vue.js2.0中子组件修改父组件传递过来的props
如果非得需要修改传入的prop为对象的属性,又不想破坏原对象,可以深拷贝这个对象,ES6提供的Object.assign({},prop)的返回值就是一个全新的对象,操作这个新对象不会影响旧对象,如果不用ES5就自己递归实现拷贝器。代码1:给computed属性设置get和set方法,并利用Object.assign()深度克隆对象可以完美解决修改props传值问题computed:{
·
如果非得需要修改传入的prop为对象的属性,又不想破坏原对象,可以深拷贝这个对象,ES6提供的Object.assign({},prop)的返回值就是一个全新的对象,操作这个新对象不会影响旧对象,如果不用ES5就自己递归实现拷贝器。
代码
1:给computed属性设置get和set方法,并利用Object.assign()深度克隆对象可以完美解决修改props传值问题
computed:{
dialogFormVisible:{
get:function(){
return this.addData=Object.assign({},this.dialogEditOrAddData)
},
set:function(newValue){
return this.addData=newValue
}
}
},
2:建议如果要修改props传入的值,用watch可以多次修改,watch监听对象得用深度监听
watch:{
dialogEditOrAddData:{//dialogEditOrAddData得在data中声明
handler(oldVal,newVal){
this.dialogFormVisible=newVal
},
deep:true
}
},
3:computed修改的值虽然get时是深度克隆对象,但是set时还是会修改父组件的值,所以如果是子组件修改后的值和父组件设置方法的值一致,第二次computed就不会触发啦
更多推荐
已为社区贡献11条内容
所有评论(0)