vue2 父组件异步加载的数据传入子组件，子组件首次不渲染

在 Vue2 中，如果父组件异步加载数据后传递给子组件，子组件会在首次渲染时无法获取到数据，因为数据还未加载完成。这时可以使用 `v-if` 指令来控制子组件的渲染，等数据加载完成后再将 `v-if` 控制的变量值设为 `true`。

具体实现步骤如下：

1. 在父组件中定义一个变量来控制子组件的渲染，初始值为 `false`。

<template>
  <div>
    <child-component v-if="isDataLoaded" :data="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDataLoaded: false,
      data: null
    }
  },
  mounted() {
    // 异步加载数据
    loadData().then((res) => {
      this.data = res;
      this.isDataLoaded = true;
    });
  }
}
</script>

2. 在子组件中通过 `props` 接收父组件传递的数据。

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  props: ['data']
}
</script>

这样，当数据加载完成后，`isDataLoaded` 变量的值会变为 `true`，子组件就可以渲染了。