javascript - 通过 props 从父组件向子组件发送已解析的异步数据 - Vue

Question

父组件:

<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>

有一个问题，当一个 promise 在父组件中解析时，它还不会在子组件中解析。是否可以加载子组件，只有在我的 getData() promise 成功解决后，因为如果没有来自父级的数据，我的子组件就没有意义。

当然，我可以在子组件中使用观察者，然后，我将从 promise 中获取正确的数据，但对我来说这似乎很老套:

@Watch('data')
private onPropChange(val: any) {
  console.log(val) // i get the correct data
}

我更喜欢有条件地渲染我的子组件，只有在 promise 被解析之后。

Answer 1

下面显示了一个示例方法。您需要根据您的实际要求对此进行更改:

<template>
  <div>
    <Nav v-if="isVisible" :items="navItems" />
  </div>
</template>

export default {
  data() {
    return { navItems: [] };
  },
  computed: {
    isVisible() {
      return this.navItems.length > 0;
    },
  },
  mounted() {
    return this.$http.getData().then(resp => {
      this.data.navItems = resp;
    });
  },
};

注意:我使用 navItems 数组的长度来确定它是否可见。您可能希望使用单独的变量(例如 isLoaded)来确定是否应在没有项目或出现错误时呈现 Nav。