Vue.js2.0中子组件修改父组件传递过来的props

如果非得需要修改传入的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就不会触发啦

猜你喜欢

转载自blog.csdn.net/a3060858469/article/details/80091152