• Listen to Lifecycle hooks on third-party vue.js Components

  • Alex Jover

  • Translator: Uncle Ho, the programmer

Special disclaimer: This article is a series posted by author Alex Jover on VueDose.

Copyright belongs to the author.

The translator had already communicated with the author before the translation to get permission to translate the whole series.

In order not to disturb your reading, the authorization record is placed at the end of this article.

The body of the

Today’s technique is one I learned from my friend Damian Dulisz. He is a member of the core team of Vue.js, the creator of the official news site Vue Newsletter, and the author of the Vue-Multiselect library.

In some scenarios, I need to know on the parent when a child component is created, mounted, or updated, especially when creating a component for a native JS library.

You probably know of ways to implement these requirements in your own components. For example, by firing an event in a child component’s lifecycle hook function, like this:

mounted() {
  this.$emit("mounted");
}
Copy the code

I’m telling you, it doesn’t have to be that way; Not to mention the fact that you can do this with third-party components.

Instead, you listen for hooks in the lifecycle using the @hook: prefix and specify callback functions.

For example, if you want to do something when rendering a third-party component v-Runtime-template, you can listen for its updated hook in its lifecycle:

<v-runtime-template @hook:updated="doSomething" :template="template" />
Copy the code

Don’t believe me? Check out this example for yourself at CodeSandbox!

You can read the article online and copy and paste the source code. If you like this series, please share it with your colleagues!

conclusion

Other articles in this series will be translated and posted to nuggets as they are published on the series website. Please keep an eye on uncle He, I believe I will bring you more quality content, don’t forget to like ~

If you want to know more about the translator, please check out the following:

  • Personal blog: blog.hadesz.com
  • Personal Github repository: github.com/hadeshe93
  • Personal wechat official account: Search “Uncle He”

Request translation of authorization records



If you think this article is good, share it with your friends