vue3修改子组件的数组

在 Vue 3 中修改子组件的数组可以使用 `v-for` 的 `key` 属性以及 `provide` 和 `inject` API。

假设你有一个父组件 `Parent` 和一个子组件 `Child`，其中 `Parent` 有一个数组 `items`，你需要在 `Child` 组件中修改这个数组。

首先，你需要在 `v-for` 中使用 `key` 属性，确保 Vue 能够正确地跟踪数组的变化，例如：

<template>
  <div>
    <child v-for="(item, index) in items" :key="item.id" :item="item" />
  </div>
</template>

然后，你需要在 `Parent` 组件中使用 `provide` API 提供 `items` 数组给所有子组件：

import { provide } from 'vue';

export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
  mounted() {
    provide('items', this.items);
  },
};

在 `Child` 组件中，你可以使用 `inject` API 获取 `items` 数组，并修改它：

import { inject } from 'vue';

export default {
  props: ['item'],
  setup(props) {
    const items = inject('items');

    const removeItem = () => {
      const index = items.indexOf(props.item);
      if (index !== -1) {
        items.splice(index, 1);
      }
    };

    return { removeItem };
  },
};

在这个例子中，我们使用 `inject` API 获取了 `items` 数组，并在 `removeItem` 方法中使用了 `splice` 方法来修改它。注意，我们并没有直接修改 `items` 数组，而是修改了它的副本，因为直接修改 `items` 数组可能会导致不可预测的行为。

希望这个例子能够帮助你理解如何在 Vue 3 中修改子组件的数组。