uniapp子父双向传数组

在Uniapp中，子父双向传数组与Vue.js的实现方法类似，可以使用v-model指令来实现。

首先，在父组件中定义一个数组，并将其作为v-model的绑定值传递给子组件：

<template>
  <div>
    <child v-model="list"></child>
  </div>
</template>

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

export default {
  components: {
    child
  },
  data() {
    return {
      list: [1, 2, 3]
    }
  }
}
</script>

在子组件中，需要在props中接收来自父组件的list数组，并通过$emit方法触发input事件，将修改后的数组传递给父组件。同时，在修改list数组时，需要使用Vue.set方法来确保响应式更新。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateList">update list</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      list: this.value
    }
  },
  methods: {
    updateList() {
      const newList = [...this.list];
      newList.push(4);
      Vue.set(this, 'list', newList);
      this.$emit('input', newList);
    }
  }
}
</script>

这样，父子组件之间就实现了双向传数组。当子组件中的list数组发生变化时，会自动更新父组件中的list数组，反之亦然。需要注意的是，在修改数组时，必须使用Vue.set方法来确保响应式更新，否则父组件不会自动更新。