vue.js 保持活动和事件渲染

Question

我有 1 个主组件和 2 个子组件。 在我做的主人：

  <keep-alive>
    <component :is="getChild" @onrender="childRender" />
  </keep-alive>

所以我从孩子 1 切换到孩子 2 并保持每个孩子的状态。

• getChild 切换子组件（按钮...不是这里的问题）。
• 子加载时会发出 onrender
• childRender 只需写一个console.log。

问题：当我们使用 keep-alive 时，子组件不会重新渲染，而当我使用 onCreated 或 onMounted 或 onUpdated 时......没有任何附加内容，这是正常的。那么如何使用 keep-alive 捕获“渲染”事件呢？

我知道我可以使用公共汽车或像 Vuex 这样的商店来保持状态......但如果可能的话我不想要它。

谢谢。

Answer 1

在 2.2.0+ 及更高版本中，激活和停用将为树中的所有嵌套组件触发。

使用激活的生命周期钩子。

export default {
  activated() {
    this.$emit("activated");
  }
}

Vue.js 文档链接：https://vuejs.org/v2/api/#keep-alive

现场演示，您可以在其中玩<keep-alive>：https://codepen.io/3vilArthas/pen/BeZgbE