DEV Community 👩‍💻👨‍💻

florent giraud
florent giraud

Posted on

VUEJS Listen lifecycle hook from the child component

Here's a very useful tip I learnt from Vuedose.

In some cases I needed to know when a component has been created, mounted or updated from a parent component.

So you already tried something like this

    <Child @mounted="doSomething"/>.
Enter fullscreen mode Exit fullscreen mode

Let me tell you this: It will not work ˆˆ.

Instead, the solution is as simple as listening to an event with the lifecycle hook name, prefixed by @hook:.

    <Child @hook:mounted="childMounted"/>
Enter fullscreen mode Exit fullscreen mode

If you dont trust the tip check the yourself in this CodeSandbox

Thank's to Vuedose for this tip. Go check their website and sign to the newsletter 😄

Oldest comments (4)

Collapse
 
juanpprieto profile image
Juan P. Prieto

thanks for sharing! worked great.

Collapse
 
alexps profile image
Alex P

Does this work with Vue 3?

Collapse
 
alexps profile image
Alex P

Found the answer here: github.com/vuejs/core/issues/3178

Collapse
 
jsbaguette profile image
florent giraud Author

It was when vue3 was not here in my article thanks for sharing the issue :)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈