vue 父组件监听子组件方法

父组件可以通过两种方式监听子组件的方法。第一种方式是使用`v-on`指令来监听子组件触发的事件，然后在父组件中定义相应的处理方法，如下所示：

// 父组件
<template>
  <div class="home">
    <h1>我是首页</h1>
    <detail-page @created="handleCreated" @mounted="handleMounted" @beforeDestory="handleBeforeDestroy"></detail-page>
 </div>
</template>

<script>
import detailPage from '@/views/detail/index.vue';
export default {
  components: {
    detailPage
  },
  methods: {
    handleCreated(data) {
      console.log(data);
    },
    handleMounted(data) {
      console.log(data);
    },
    handleBeforeDestroy(data) {
      console.log(data);
    }
  }
};
</script>

// 子组件
<template>
  <div class="wrap">我是详情页</div>
</template>

<script>
export default {
  created() {
    this.$emit("created", "我现在处于创建完成阶段");
  },
  mounted() {
    this.$emit("mounted", "我现在处于挂载完成阶段");
  },
  beforeDestroy() {
    this.$emit("beforeDestroy", "我现在处于即将销毁阶段");
  }
};
</script>

第二种方式是使用`@hook:对应的生命周期`来监听子组件的生命周期，如下所示：

// 父组件
<template>
  <div class="home">
    <h1>我是首页</h1>
    <detail-page @hook:beforeMount="handleProgress"></detail-page>
  </div>
</template>

<script>
import detailPage from '@/views/detail/index.vue';
export default {
  components: {
    detailPage
  },
  methods: {
    handleProgress() {
      debugger;
    }
  }
};
</script>