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

1、子组件

<template>
<div>子组件</div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  created () {
    /**
     * 方法二
     * 通过@hook 监听 @hook:created="parentMethods2"(created是子组件生命周期)
     * 父组件事件parentMethods2监听到了子组件生命周期created
     */
  },
  mounted () {
    /**
     * 方法一
     * 子组件触发父组件的方法通过绑定事件(@methods1="parentMethods1")
     * 在子组件使用this.$emit('methods1')触发此事件
     */
    this.$emit('methods1')
  }
}
</script>
<style scoped lang="less">

</style>

2、父组件

<template>
<div>

  <Child @hook:created="parentMethods2" @methods1="parentMethods1"/>
</div>
</template>
<script>

/**
 * 方法一 @methods1="parentMethods1
 * 有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就
 * 做一些逻辑处理，可以通过以下写法实现
 *
 * 方法二  @hook:created="parentMethods2"
 * 更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可
 * @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，
 * 例如：created，updated 等都可以监听。
 */
import Child from './child'
export default {
  components: {
    Child
  },
  methods: {
    parentMethods1 () {
      console.log('父组件监听到子组件 mounted 钩子函数 ...')
    },
    parentMethods2 () {
      console.log('父组件监听到子组件 mounted 啦 ...')
    }
  }
}
</script>
<style scoped lang="less">

</style>