vue2.0中，子组件修改父组件传递过来得props，该怎么解决？

发布于
2017-03-01

vue2.0中，子组件中不能修改父组件的状态，否则在控制台中会报错。
但是经我测试发现，这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等
如果props是对象的话，在子组件内修改props的话，父组件是不会报错的。
测试代码如下：
parent.vue

<template>
  <div class="">
    <p>parent</p>
    <child :test="test"></child>
    <p>这是父组件中的data：{{test.hello}}</p>
  </div>
</template>
<script type="text/ecmascript-6">
  import Child from './child.vue'
  export default {
    data() {
      return {
          test: {
              hello: 1
          }
      }
    },
    components: {
      Child
    }
  }
</script>
<style>
</style>

child.vue

<template>
    <div class="">
      <p>child</p>
      <p>这是子组件中的props：{{test.hello}}</p>
      <input type="text" v-model="test.hello">
      <p></p>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        props:{
          test: {
              type:Object
          }
        }
    }
</script>
<style>
</style>

运行parent.vue之后，我们可以看到如下的结果：

图片描述

我们在子组件的input中，直接绑定到props上，这样，我们修改input的内容，会发现，子组件的props被修改了，同时，父组件的data一样也被修改了，更关键的是，我们打开控制台，可以看到。没有报错。
这是不是违背了作者的子组件不修改props的意图？或者说，如果是传递的props的话，是不是就可以在子组件中修改props，从而达到修改父组件data的目的？但是结果就如作者所说，会导致父组件的data混乱，而且难以捕捉。请问，遇到这种情况，该怎么有效而又可靠的解决掉？

vue.js

阅读 40.9k

10 个回答

得票最新

陈安柱

4k2319

发布于
2017-03-01

✓ 已被采纳

如果非得需要修改传入的prop为对象的属性，而又不想破坏原对象，可以考虑深拷贝一下这个对象。

ES6提供的Object.assign({}, prop)的返回值就是一个全新的对象，操作这个新对象不会影响旧对象。如果不用ES6就自己递归实现拷贝器

1.给computed属性设置get和set方法,并利用Object.assign()浅克隆或者JSON.stringify()深度拷贝对象可以完美解决修改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就不会触发拉

悠扬小Q

2.3k1412

发布于
2017-03-02

文档中写的很清晰，prop是单向数据流的,原则上子组件修改props是不被允许，或许你可以去给vue 提 issue.
另外，子组件修改prop文档中给的方法是使用自定义事件回调函数完成的.文档链接:
https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件

barefootChild

21318

发布于
2017-03-02

首先，组件间的数据传递只能是父到子，数据流向的单一保证了数据变化的可追踪性；如果子组件操作该值要求父组件作出相应变化时，那就子组件emit一个事件，父组件内捕获这个事件，然后在父组件内执行相应的变化；如果只是想通过props获取一个初始值，之后无论子组件如何操作该值都不会影响父组件的变化，那就在传入子组件数据的时候就进行一下处理（值引用类型数据无需处理，址引用数据进行一下深度拷贝Object.assign({},obj)或者JSON.parse(JSON.stringify(obj))）