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

<template>
  <p class="parent">
  <ul>
    <li v-for='item in question.content'>
      <child :data='item'></child>
    </li>
  </ul>
  <button @click='add'>添加</button>
 </p>
</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: '选项二'
        }]
      })

    }
  }
}

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

`