【译】Vue 的小奇技（第十篇）：监听第三方组件的生命周期钩子

• 原文地址：Listen to lifecycle hooks on third-party Vue.js components

• 原文做者：Alex Jover

• 译者：程序猿何大叔

特别声明：本文是做者 Alex Jover 发布在 VueDose 上的一个系列。

版权归做者全部。

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。

为了避免影响你们阅读，得到受权的记录会放在本文的最后。

正文

今天要讲的技巧是我之前从我朋友 Damian Dulisz 那里学来的。他是 Vue.js 核心团队的成员，就是那个官方新闻站点 Vue newsletter 的建设者，也仍是 vue-multiselect 库的做者。

在一些场景中，我须要在父组件上知道子组件何时被建立、挂载或者是更新，特别是当为原生 js 库建立组件时。

你可能知道有一些方法能够在你本身的组件上，实现以上的需求。举个例子，经过在子组件的生命周期的钩子函数中，触发事件，就像这样：

mounted() {
  this.$emit("mounted");
}
复制代码

而后你就能够在父组件上这样作：<Child @mounted="doSomething"/>。

我告诉你，没有必要这样实现；更况且实际上，你在面对第三方组件时，也办法这样实现。

取而代之的方法是，经过使用 @hook: 前缀监听生命周期中的钩子，并指定回调函数。

举个例子，若是你想要在第三方组件 v-runtime-template 渲染时作一些事情，那么你能够监听它的生命周期中的 updated 钩子：

<v-runtime-template @hook:updated="doSomething" :template="template" />
复制代码

不相信我吗？本身去 CodeSandbox 看看这个 例子 吧！

你能够在线阅读这篇 原文，里面有可供复制粘贴的源代码。若是你喜欢这个系列的话，请分享给你的同事们！

结语

此系列的其余文章，会同步系列官网的发布状况，及时地翻译发布到掘金。请持续关注「程序猿何大叔」，相信我会给你们带来更多优质的内容，不要忘了点赞~

若是想要了解译者的更多，请查阅以下：

• 我的博客：blog.hadesz.com
• 我的 github 仓库：github.com/hadeshe93
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~