Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide access to lifecycle hooks of a child component (e.g. if 3rd party component) #4345

Closed
TuringJest opened this issue Aug 15, 2021 · 2 comments

Comments

@TuringJest
Copy link

What problem does this feature solve?

When data is changed in the parent but the template is actually rendered in a child, the updated hook of the parent will not trigger.
That means if the child component is a closed/external component (3rd party) there is no way to know when the DOM has been updated.

This is problematic when we rely on the render result to execute logic (generate custom print previews e.g.), as nextTick can be quite unpredictable and Vue's internal batching will prevent checking render results in a chain of updates.

The general advice now seems to watch for data changes, but as changed Data != DOM Update this does not help.

In vue2 I believe there was an @hook:EVENT that could be listened to from the parent.
https://vuedose.tips/listen-to-lifecycle-hooks-on-third-party-vue-js-components

What does the proposed API look like?

<ChildComponent @hook:updated="doOnUpdated()" />

Would be great if we could register and access the child's hooks in the setup function of the parent (through a ref?), after the child has been mounted.

@LinusBorg LinusBorg transferred this issue from vuejs/vue Aug 15, 2021
@LinusBorg LinusBorg changed the title VUE3: Provide access to lifecycle hooks of a child component (e.g. if 3rd party component) Provide access to lifecycle hooks of a child component (e.g. if 3rd party component) Aug 15, 2021
@sqal
Copy link
Contributor

sqal commented Aug 15, 2021

You can already do this. These hooks was renamed to onVnodeXXX

<Comp @vnodeUpdated="doSomething"  />
h(Comp, {
 onVnodeUpdated: doSomething,
 onVnodeMounted: doSomething,
 // etc..
})

@TuringJest
Copy link
Author

Works!
Now, I really wish I had not spent that time hacking around the issue 😅
Thanks a lot!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
@sqal @TuringJest and others