vue中父组件如何能监听到子组件的生命周期

一、通过 $emit 实现

以 mounted 为例，在父组件 Parent 和子组件 Child 中，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

// 父组件 Parent.vue中
<Child @mounted="handleDoSomething"/>
    
// 子组件 Child.vue中
mounted() {
  this.$emit('mounted',"mounted我被触发了~");
}

缺点：以上方法虽然可行，但每次都需要手动写一次 $emit 触发父组件的事件。

推荐使用：更简单的方式可以在父组件引用子组件时通过 @hook 来监听生命周期。

二、通过 @hook 实现

还是父组件 Parent 和子组件 Child，@hook 的写法如下：

//  Parent.vue
<Child @hook:mounted="handleDoSomething" ></Child>

handleDoSomething() {
   console.log('父组件监听到 mounted 钩子函数~');
},

//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数~');
},    

@hook 方法除了可以监听 mounted，其它的生命周期都可以监听。