vue.js keep-alive and event rendering

Question

I have 1 master component and 2 childs. In the master i do :

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

So I switch from child 1 to child 2 and keep state of each.

getChild switch child component (buttons... not the problem here).
onrender is emit when child load
childRender just write a console.log.

Problem : when we use keep-alive, the child component is not re-render and when i use onCreated or onMounted or onUpdated... nothing append and it's normal. So how catch a "render" event with keep-alive ?

I know i can use a bus or a store like Vuex to keep state... but i don't want it if possible.

Thanks.

Andrew Vasilchuk Andrew Vasilchuk · Accepted Answer · 2019-07-14T19:19:12

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

Use activated lifecycle hook.

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

Vue.js Documentation link: https://vuejs.org/v2/api/#keep-alive

Live demo, where you can play with <keep-alive>: https://codepen.io/3vilArthas/pen/BeZgbE

vue.js keep-alive and event rendering

1 Answers