vue.js - Vue 强制所有子组件渲染

Question

我正在使用 Vue 和 Vuetify 来创建我的应用程序。我用 vuetifyv-expansion-panels来创建手风琴风格的展示。每个v-expansion-panel本身都包含一个自定义组件。

我注意到在第一次单击扩展面板之前不会创建这些组件。之后， usingkeep-alive允许子组件的所有反应属性和方法处于活动状态（这是我想要的行为）。

创建父组件时如何强制创建子组件？这样，在子组件的生命周期钩子中触发的任何方法created()都应该在创建父组件时触发。

这个 Codepen是当前行为的一个例子。注意：单击面板时请务必查看控制台。

标签： vue.jsvuejs2vue-componentvuetify.js

Answer 1

如果您考虑一下，延迟加载扩展面板的内容实际上是有意义的，因为如果用户从不打开它们，这将是无用的工作。因此，您尝试完成的事情可能有一些更好的方法，但是如果您仍然喜欢它，那么我的建议是找到一种以编程方式打开/关闭面板的方法（如此处所示）并在渲染父组件时快速打开和关闭它. 这样，您将拥有您的子组件created，并且 UI 将保持不变。