Vue子组件复用的props问题

Question

父组件是个列表,每一项的数据交给子组件处理逻辑.

<template>
  <div class="parent">
  <ul>
    <li v-for='item in question.content'>
      <child :data='item'></child>
    </li>
  </ul>
  <button @click='add'>添加</button>
 </div>
</template>
<script>
  //数据模板
  let temp = {
    type: 'radio',
    title: '单选题',
    options: [{
      text: '选项一'
    } ,{
      text: '选项二'
    }]
  }

export default {
  data() {
    question: {
      name: 'XXX',
      content: []
    }
  },
  methods: {
    add() {
      //不行,拷贝了但数据还是被共用了
      this.question.content.push(Object.assign({}, temp))
      //可以,数据之间没用被共用了,开辟了新内存
      this.question.content.push({
        type: 'radio',
        title: '单选题',
        options: [{
        text: '选项一'
        } ,{
        text: '选项二'
        }]
      })

    }
  }
}

第一种明明拷贝了,应该是互不影响的.难道是因为不是深拷贝?

`

Answer 1

是的你说对了，不是深度拷贝。

修改一下翻译。
如果源值是对对象的引用，则它仅复制该指针。

Object.assign

Answer 2

是的，是深度拷贝的问题。

所以你应该这样来做：

this.question.content.push(JSON.parse(JSON.stringify(temp));

在 vue 开发中，这种需求是非常多的，都可以使用上面的方式来简单的实现深度复制。
更方便地，你可以把它定义到 Vue 的原型属性下，这样就实现了一个简单的 Vue 插件方法：

Vue.prototype.$plain = function (obj) {
    return JSON.parse(JSON.stringify(obj);
}

然后，你就可以在任何组件里这样来用了：

const newObj = this.$plain(boj);