javascript - 在 vue.js 中渲染子组件之前，等待父组件安装/准备就绪

Question

在我的 SPA 应用中，我有一个 <app-view>处理基本应用程序代码(加载用户数据、呈现导航栏和页脚等)并具有 slot 的包装器用于呈现实际页面。此插槽仅在用户数据可用时呈现。

创建此包装器是因为某些页面需要不同的基本代码，因此我无法将此基本代码保留在包含 <router-view> 的主应用程序中不再。

我尝试查看 vue-router 是否提供高级选项或建议用于切换基本代码的设计模式，但没有找到任何东西。

问题在于，子组件将在父组件挂载之前渲染，即在父组件决定不渲染子组件之前(因为它正在加载用户数据)。这会导致类似 undefined as no attribute foo 的错误.

正因为如此，我正在寻找一种方法来推迟子渲染，直到它的父级被挂载。

Answer 1

我遇到了类似的问题，但不是 SPA。我有需要来自父组件的数据的子组件。问题是数据只会在父级完成挂载后生成，所以我最终在子级中得到了空值。

我就是这样解决的。我使用 v-if 指令仅在父级完成安装后才安装子级。 (在 mounted() 方法中)看下面的例子

<template>
  <child-component v-if="isMounted"></child-component>
</template>
<script>
  data() {
     isMounted: false
  }, mounted() {
     this.isMounted = true
  }
</script>

之后， child 可以从 parent 那里获取数据。 它有点不相关，但我希望它能给你一个想法。