vue 監聽子元件的生命周期

今天在看一些公衆号裡分享的vue相關知識時, 看到了一個有趣的問題, 就是如何監聽子元件的生命周期, 作者介紹了兩種方法。

第一種方法是最普通的, 也是每個會vue的開發者都能想到的, 那就是在子元件的生命周期函數中通過 $emit 給父元件傳遞一個事件, 然後再父元件接收:

// Parent.vue
<Children @mounted='doSomething'></Children>

// Children.vue

mounted(){
    this.$emit('mounted')
}
           

第二種方法是最牛逼的:

// Parent.vue

<Children @hook:mounted='doSomethig'></Children>
           

這個方法不需要對子元件做任何處理, 直接通過@hook 這個方法就可以監聽子元件的生命周期事件。而 @hook 這個方法, 我在vue的官方文檔裡沒有找到, 是以覺得有必要記錄一下。

注意: 這個方法不僅可以監聽mounted, 其他的生命周期事件都是可以監聽的。