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

问题描述

问 题

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混乱，而且难以捕捉。请问，遇到这种情况，该怎么有效而又可靠的解决掉？

解决方案

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

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

这篇关于vue.js - vue2.0中，子组件修改父组件传递过来得props，该怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！