隐藏页面的一部分，直到使用 vue 加载子组件答案

【问题标题】：Hiding part of a page until a child component is loaded using vue隐藏页面的一部分，直到使用 vue 加载子组件
【发布时间】：2022-01-12 14:01:04
【问题描述】：

我有一个使用 Vue 的 SPA，默认布局是标题中的一些 html，然后是一个抽象的子组件，该组件被注入到页面中。每个孩子都有一个加载器，因此当页面加载时，用户会看到标题 html，并且当孩子从服务器获取数据并呈现它时会显示加载图标：

<navbar/>
<child id="main-content"/>

我现在需要为每个页面添加页脚。但是，它看起来不如在父默认布局中添加页脚导致显示页眉，然后是加载图标，然后是页脚，最终只有在从子服务器中获取数据后才会被下推：

<navbar/>
<child id="main-content"/>
<footer>
Stuff in my footer that should not be shown until the child component is completely loaded
</footer>

有没有办法在子组件渲染完所有数据之前隐藏父组件中的页脚？我希望有一个解决方案，可以从父级执行一次，而不必向每个子级添加 $emit。

【问题讨论】：

请使用您尝试过的最小示例代码集来编辑您的问题，以重现您的问题和您的具体挑战，以便我们为您提供最好的帮助。
编辑希望能澄清我的代码和问题。

标签： javascript html css vue.js

【解决方案1】：

上面的另一个附加选项是使用 Vuex 存储，它将知道 API 数据的状态。每个组件都可以访问存储。这将使您无需在组件之间传达获取的数据状态，或编写任何检查状态的脚本。这看起来像是 Vuex 的一个很好的例子。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

如果您使用的是 Vue 2，则可以实现 global event bus。

事件总线/发布-订阅模式是一种让应用程序的不相关部分相互通信的方式。

虽然，这个问题似乎暴露了应用程序数据管理中的一个更大问题。据我了解，所有相关的数据都应该来自同一部分。例如，如果您的footer 和child 组件依赖于另一个组件，那么parent 应该获取child 的数据并将该数据作为props 传递。这样您就可以处理 footer 组件的加载状态。

【讨论】：

本例中的页脚不是组件；它只是一个页脚 html 标记。如果我使用全局事件总线，那么我是否还必须向我的每个子组件添加代码以返回信息？我希望能够在父组件中编写代码（只需一次），它可以监视子组件的完成加载。
不幸的是，我不认为你可以做你所要求的。如果理解正确，您希望父组件进入子组件并在加载数据时侦听事件更改，然后更新父组件的模板。父母可以知道此事件的唯一方法是使用$emit() 方法，这需要更改孩子。 article 上有一张图片，直观地展示了数据在 Vue 中的流动方式。
如果这是不可能的，我还能使用基本的 javascript 以某种方式监视事件吗？如果是这样，那么我可以隐藏元素直到加载。
是的，你可以这样做。这是不好的做法，因为 Vue 使用虚拟 DOM，如果你像这样修补它可能会不同步。 JS 有一个用于添加 custom event listeners 的 API，尽管在加载自定义事件时触发自定义事件，您仍然需要更改子级。另一种方法是设置一个interval 来持续检查DOM 元素，当找到它时你可以清除间隔。再次，不好的做法。
好的...我会接受您上面的答案，因为该答案以及这些 cmets 提供了我可以采取的潜在路径。