如何在Vue中从子组件更改和呈现源数组

<template>
  <div>
    <child-component :source-array="sourceArray" @update-source-array="updateSourceArray"></child-component>
    <!-- 呈现源数组 -->
    <ul>
      <li v-for="item in sourceArray" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      sourceArray: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    updateSourceArray(newArray) {
      this.sourceArray = newArray;
    }
  }
};
</script>

<template>
  <div>
    <!-- 修改源数组 -->
    <button @click="changeSourceArray">Change Source Array</button>
  </div>
</template>

<script>
export default {
  props: {
    sourceArray: {
      type: Array,
      required: true
    }
  },
  methods: {
    changeSourceArray() {
      // 进行源数组的修改
      const newArray = [...this.sourceArray];
      newArray.push({ id: 4, name: 'Item 4' });

      // 通过事件emit通知父组件更新源数组
      this.$emit('update-source-array', newArray);
    }
  }
};
</script>