【譯】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
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~