vue 监听子组件的生命周期

原创于 2019-09-19 11:22:09 发布 · 759 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

本文介绍两种在Vue中监听子组件生命周期的方法。一种是在子组件的生命周期函数中使用$emit触发事件，父组件通过监听该事件进行响应。另一种更高级的方法是直接在父组件中使用@hook监听子组件的任何生命周期事件，无需修改子组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在看一些公众号里分享的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, 其他的生命周期事件都是可以监听的。