uniapp组合式api父传子数组

在UniApp的组合式API中，父组件向子组件传递数据通常使用props（属性）。如果你需要将一个包含数组的数据从父组件传递给子组件，并且这个数组是动态的，比如包含其他数组或其他类型的值，你可以这样做：

1. 父组件中创建并处理数据：

<template>
  <child-component :data="parentArray" />
</template>

<script>
export default {
  data() {
    return {
      parentArray: [
        { key: 'item1', nestedArray: ['subItem1', 'subItem2'] },
        { key: 'item2', nestedArray: ['subItem3', 'subItem4'] }
      ]
    };
  }
};
</script>

2. 子组件接受并使用数据：

<template>
  <ul>
    <li v-for="(item, index) in $parent.parentArray" :key="index">
      {{ item.key }}
      <ul>
        <li v-for="subItem in item.nestedArray">{{ subItem }}</li>
      </ul>
    </li>
  </ul>
</template>

<script>
import { ref } from 'uni-app';
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const nestedItemsRef = ref(props.data);
    // 对接父组件传递过来的数组，在这里可以操作它
    return { nestedItemsRef };
  }
};
</script>

在这个例子中，`parentArray`是一个包含对象的数组，每个对象有一个`nestedArray`字段。父组件通过`:data` prop将其传递给子组件，子组件通过`$parent`访问到这个数组，并使用Vue的响应式特性来处理。