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

Question

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

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

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

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

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

原文由 megapctr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在尝试了几个选项之后，看起来我需要硬着头皮明确定义我的组件所依赖的数据，如下所示：

 <app-view>
  <div v-if='currentProfile'>
    ...
  </div>
</div>

（ currentProfile 从 vuex store getter 接收，并在 app-view 中获取）

原文由 megapctr 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

原文由 Stanley 发布，翻译遵循 CC BY-SA 4.0 许可协议