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

柑橘乌云_2025-08-12 21:29

一、vue2方式

方法一：大家都知道子组件mounted后父组件的mounted才会执行，可以利用这一点

方法二：通过vue文档并未提及的方式@hook的方式

html 复制代码

<template>
  <div>
    <componentDemo  @hook:mounted="handleMounted" @hook:unmounted = "handleUnMounted"></componentDemo >
  </div>
</template>
 
<script setup>
import { ref } from "vue";
import componentDemo from './components/componentDemo .vue'

function handleUnMounted(){
  console.log('子节点卸载完成');
}
function handleMounted(){
  console.log('子节点挂载完成');
}

</script>
 
<style scoped></style>

二、vue3方式

方法一：大家都知道子组件mounted后父组件的mounted才会执行，可以利用这一点

方法二：通过vue文档并未提及的方式@vue的方式

html 复制代码

<template>
  <div>
    <componentDemo  @vue:mounted="handleMounted" @vue:unmounted = "handleUnMounted"></componentDemo >
  </div>
</template>
 
<script setup>
import { ref } from "vue";
import componentDemo from './components/componentDemo .vue'

function handleUnMounted(){
  console.log('子节点卸载完成');
}
function handleMounted(){
  console.log('子节点挂载完成');
}

</script>
 
<style scoped></style>

By the way

以上@hook和@vue这两种方式为源码里的实现，并且这种方法不仅可以监听自定义组件（子组件）的生命周期，也可以监听虚拟节点的生命周期，比如监听div等等。