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, 其他的生命周期事件都是可以监听的。