vue3 父组件向子组件传递数组

在 Vue3 中，父组件向子组件传递数组可以通过以下步骤实现：

1. 在父组件中，定义一个数组并将其作为子组件的 props 传递。

<template>
  <child-component :myArray="myArray" />
</template>
<script>
export default {
  data() {
    return {
      myArray: [1, 2, 3, 4]
    }
  }
}
</script>

2. 在子组件中，接收 props 并将其绑定到子组件的 data 上。

<template>
  <div v-for="item in localArray" :key="item">{{ item }}</div>
</template>
<script>
export default {
  props: {
    myArray: Array
  },
  data() {
    return {
      localArray: this.myArray
    }
  }
}
</script>

3. 在子组件中，如果需要在本地修改数组，需要先将其复制到本地 data 中，然后再进行修改。

<template>
  <div v-for="(item, index) in localArray" :key="index">
    <span>{{ item }}</span>
    <button @click="removeItem(index)">Remove</button>
  </div>
</template>
<script>
export default {
  props: {
    myArray: Array
  },
  data() {
    return {
      localArray: this.myArray
    }
  },
  methods: {
    removeItem(index) {
      // 先将原数组复制到本地 data 中
      this.localArray = [...this.localArray]
      // 修改本地数组
      this.localArray.splice(index, 1)
      // 触发父组件事件，将修改后的数组传递回去
      this.$emit('update:myArray', this.localArray)
    }
  }
}
</script>

4. 在父组件中，监听子组件触发的事件，并更新父组件的数组。

<template>
  <child-component :myArray="myArray" @update:myArray="myArray = $event" />
</template>
<script>
export default {
  data() {
    return {
      myArray: [1, 2, 3, 4]
    }
  }
}
</script>

这样，父组件就可以向子组件传递数组，并且子组件也可以在本地修改数组，并将修改后的数组传递回父组件。