vue中，点击按钮将父组件中的数组传递给子组件，并将子组件中的原数组替换成父组件2传递过来的数组

在父组件中，需要将数组作为 props 传递给子组件，同时需要定义一个方法来更新数组。假设父组件中的数组名为 `parentArray`，子组件中的数组名为 `childArray`，更新数组的方法名为 `updateChildArray`，则代码如下：

<template>
  <div>
    <button @click="updateChildArray">更新子组件数组</button>
    <ChildComponent :childArray="parentArray" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentArray: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    updateChildArray() {
      this.parentArray = ['newItem1', 'newItem2', 'newItem3']
    }
  }
}
</script>

在子组件中，需要接收父组件传递的数组作为 props，并将其存储在子组件自己的 data 中。同时，需要在 props 中定义 `childArray` 的类型为数组，并且设置 `deep` 为 `true`，以便子组件能够监听父组件传递的数组的变化。代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in childArray" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    childArray: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      childArrayData: this.childArray
    }
  },
  watch: {
    childArray: {
      handler(newVal) {
        this.childArrayData = newVal
      },
      deep: true
    }
  }
}
</script>

这样，当父组件中的 `parentArray` 数组发生变化时，子组件中的 `childArrayData` 数组也会同步更新。在父组件中调用 `updateChildArray` 方法时，会将子组件中的 `childArrayData` 数组替换成新的数组。