uniapp父子双向传数组

可以使用 props 和事件来实现 uniapp 父子双向传数组。

首先，在父组件中定义一个数组，并将它传递给子组件：

<template>
  <div>
    <child-component :items="parentItems" @update-items="updateParentItems"></child-component>
  </div>
</template>

<script>
import childComponent from './child-component.vue';

export default {
  components: {
    childComponent,
  },
  data() {
    return {
      parentItems: ['item1', 'item2', 'item3'],
    };
  },
  methods: {
    updateParentItems(items) {
      this.parentItems = items;
    },
  },
};
</script>

然后，在子组件中，通过 props 接收父组件传递的数组，并在子组件中对数组进行操作后，通过事件将修改后的数组传递回给父组件：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  methods: {
    addItem() {
      const newItems = [...this.items, 'new item'];
      this.$emit('update-items', newItems);
    },
  },
};
</script>

这样，当子组件中点击“Add Item”按钮时，会将修改后的数组通过事件传递回给父组件，从而实现了父子双向传数组。