Javascript 通过道具将解析的异步数据从父组件发送到子组件-Vue

父组件：

<template>
  <div>
    <Nav :data="data" />
  </div>
</template>

<script lang="ts">
// ... removed obvious imports for readability
@Component({
  components: {
    Nav: () => import('@/components/Nav.vue')
  }
})
export default class Home extends Vue {
  public nav: NavInterface = {}

  private getData(): Promise<any> {
    // ... this.$http - is an axios instance
    return this.$http
      .getData()
      .then((resp: any) => {
        this.data = resp.data.nav
      })
  }
}
</script>

<template>
  <div class="nav">
    <ul>
      <li v-for="(nav, index) in data">{{ nav.id }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
// ... imports
export default class Nav extends Vue {
  @Prop({ default: null }) public readonly data!: NavInterface

  private mounted(): void {
    console.log(this.data) // is undefined, because promise is not resolved yet - this is a problem
  }
}
</script>

---

我更愿意有条件地呈现我的子组件，只有在承诺得到解决之后。

您可以向父组件添加一条if语句：

<template>
  <div>
    <Nav v-if="loaded" :data="data" />
  </div>
</template>

或者如果data.nav为空，则填充数据后o不存在

    <template>
      <div>
        <Nav v-if="data.nav" :data="data" />
      </div>
    </template>

---

下面是一个示例方法。您需要根据实际需求对此进行更改：

导出默认值{
数据（）{
返回{navItems:[]}；
},
计算：{
isVisible（）{
返回this.navItems.length>0；
},
},
安装的（）{
返回此值。$http.getData（）。然后（resp=>{
this.data.navItems=resp；
});
},
};

---

注意：我正在使用

navItems

数组的长度来确定它是否可见。您可能需要使用一个单独的变量（例如，

isLoaded

）来确定当没有项目或存在错误时是否应呈现

Nav

。

我也尝试过，但在我的情况下

navItems

是一个空对象，因此它始终给我

true

。。。我刚刚使用了

Object.keys（navItems.length），它就工作了。谢谢
return this.$http
      .getData()
      .then((resp: any) => {
        this.data = resp.data.nav
        this.loaded = true
      })

    <template>
      <div>
        <Nav v-if="data.nav" :data="data" />
      </div>
    </template>