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

之后，孩子可以从父母那里获取数据。它有点无关，但我希望它能给你一个想法。投反对票前请三思。

Answer 2

在尝试了几个选项后，看起来我需要咬紧牙关明确定义我的组件所依赖的数据，如下所示：

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

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