vue.js keep-alive 和事件渲染

Question

我有 1 个主组件和 2 个 child。在我的主人中：

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

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

问题：当我们使用 keep-alive 时，child 组件不是 re-render 并且当我使用 onCreated 或 onMounted 或 onUpdated 时。 .. 没有附加内容，这很正常。那么如何用 keep-alive 捕获 "render" 事件呢？

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

谢谢。

Answer 1

In 2.2.0+ and above, activated and deactivated will fire for all nested components inside a tree.

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

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

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

vue.js keep-alive and event rendering