Vue 2在组件渲染之前加载Ajax数据

Question

我有一些嵌套的Vue组件，子组件使用AJAX调用加载数据。是否有可能让父级等待完成安装，直到子级进行Ajax调用并完成渲染为止？我已经看到一些使用async created（）或beforeRouteEnter：函数（到，从，下一个）的解决方案，但是我似乎无法在Fiddle上使用它。

我在此处发布了一个jsfiddle：https://jsfiddle.net/likwidmonster/20potzwc/16/

在jsfiddle中，我有nextTick函数，当每个函数加载时，该函数都会打印到日志中。我希望它具有以下输出：

grandchild next tick
child next tick
grandchild next tick
child next tick
grandchild next tick
child next tick
parent next tick

Answer 1

可以这么说，您不能阻止loading的父级，但是可以通过在顶部应用v-cloak，v-if或v-show来使其看起来像父级模板中的HTML元素。您可以在父级上拥有一个属性，例如：

loaded: false

然后您可以使用sync通过将此值附加到子级来将该值与父级和子级同步：

<child :loaded.sync="loaded"></child>

然后，在孩子中，$emit解决以下问题时，您可以使用Promise：

this.$emit('update:loaded', true)

这将告诉父母将loaded从false更改为true。

最后，通过附加一个v-show指令并将其传递给loaded变量，可以确保在尝试使用该变量之前不渲染父对象：

<div v-show="loaded">

因此，在初始页面加载时，该值为false。数据完成加载后，子项$emit的加载完成后，它将是true，父项将变为可见。