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

在Vue中，要从子组件更改和呈现源数组，可以通过props和emit来实现父子组件之间的通信。

首先，在父组件中定义一个源数组，并将其作为props传递给子组件：

<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>

在子组件中，可以通过props接收父组件传递的源数组，并通过事件emit来通知父组件更新源数组：

<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>

在上述代码中，父组件通过props将源数组传递给子组件，子组件接收到源数组后，对其进行修改，并通过事件update-source-array通知父组件更新源数组。父组件通过监听update-source-array事件，接收到子组件传递的新数组，并将其赋值给源数组，从而实现了源数组在子组件中的修改和在父组件中的呈现。

这种方式可以实现父子组件之间的数据传递和状态管理，适用于需要在子组件中修改源数组并在父组件中进行呈现的情况。

腾讯云相关产品和产品介绍链接地址：

请注意，答案中不涉及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等品牌商的信息。