嵌套对象中的Vue合并值与父数组

// 父组件
<template>
  <div>
    <child-component :data="obj"></child-component>
    <p>父组件中的值：{{ obj.name }}</p>
    <p>父组件中的数组：{{ arr }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: 'Vue.js' },
      arr: ['A', 'B', 'C']
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="changeValue">修改对象属性值</button>
    <button @click="changeArray">修改数组元素值</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    changeValue() {
      this.data.name = 'Modified Vue.js'
    },
    changeArray() {
      this.data.splice(0, 1, 'X')
    }
  }
}
</script>