DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 πŸ˜„

Top 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 :)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›