vue.js keep-alive 和事件渲染

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://v2.vuejs.org/v2/api/#keep-alive

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