父组件监听子组件的生命周期

方法一：$emit

其实就是在父组件上封装了一个v-on的事件用来监听子组件的事件，只不过事件名和钩子函数同名，当子组件发布时，即执行this.$emit('钩子函数created/mounted',参数)时，在父组件则可以监听到，然后执行回调，

父组件
<template>
  <div>
    <child-component @mounted="handleDoSomething"></child-component>
  </div>
</template>
<script>
export default Vue.component("HelloWorld", {
 ...
  methods:{
    handleDoSomething(data){
      console.log('监听到子组件生命周期钩子函数mounted时，触发该回调',data)
    }
  },
  components:{
    "child-component":ChildComponent
  }
});
</script>

子组件
<script>
export default {
   ...
    mounted(){
        this.$emit('mounted','mounted 触发了')
    },
}
</script>

总结：其实就是父子组件通信，事件名和钩子函数相同

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

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

方法二：@hook实现

@hook 方法可以监听子组件的任何的生命周期。子组件不需要发布。直接在父组件中，插入子组件的地方，使用@hook.声明周期函数名="函数名"即可

原理：就是父子组件通信的基础上（方法1），添加@hook，形成了对应生命周期函数的自动发布，方法1每次都是手动执行发布。

<template>
  <div>
    <child-component @hook:mounted="handleDoSomething"></child-component>
  </div>
</template>
<script>
export default Vue.component("HelloWorld", {
 ...
  methods:{
    handleDoSomething(data){
      console.log('监听到子组件生命周期钩子函数mounted时，触发该回调',data)
    }
  },
  components:{
    "child-component":ChildComponent
  }
});
</script>

父子组件生命周期的执行顺序：父created、父beforeMount、孩created、孩mounted、父mounted、父beforeDestroy、孩beforeDestroy、孩destroyed、父detroyed、、