uniapp 子组件加载父页面的接口数据

在Uniapp中，子组件可以通过props属性接收父页面传递过来的数据，然后在子组件中使用这些数据。

1. 在父页面中，先定义需要传递给子组件的数据，如下所示：

<template>
  <div>
    <child :list="list"></child>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      // 发送接口请求获取数据
      // ...
      // 将接口返回的数据赋值给list
      this.list = [...];
    }
  }
};
</script>

2. 在子组件中，通过props接收父页面传递过来的数据，并在组件中使用这些数据，如下所示：

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

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
};
</script>

在上述示例中，父页面通过props属性向子组件传递了list数据，子组件通过props接收了这个数据，并使用v-for指令遍历list数组，将数据渲染到页面中。

需要注意的是，如果父页面的数据是通过异步请求获取的，那么子组件可能会在父页面数据还未获取到时就开始渲染，此时子组件中的list数据会是空数组。为了避免这种情况，可以在子组件中使用v-if指令判断list数组是否有数据，只有在有数据时才渲染页面。