父组件监听子组件生命周期
刀刀
0字
0分钟
2026/8/16
父组件监听子组件的生命周期，Vue2可以使用 @hook 事件， @hook 事件是 Vue2.4.0+ 新增的特性，允许开发者监听组件内生命周期钩子。
vue
<template>
<Son
v-if="!flag"
@hook:mounted="childMounted"
@hook:unmounted="childUnMount"
></Son>
</template>
<script setup>
function childMounted() {
console.log('子组件已挂载')
}
function childUnMount() {
console.log('子组件已卸载')
}
</script>但如果是Vue3，则无法直接监听子组件的生命周期，因为Vue3中没有 @hook 事件。需要修改为 @vue 事件。
vue
<template>
<Son
v-if="!flag"
@vue:mounted="childMounted"
@vue:unmounted="childUnMount"
></Son>
</template>
<script setup>
function childMounted() {
console.log('子组件已挂载')
}
function childUnMount() {
console.log('子组件已卸载')
}
</script>这个方法不仅可以监听子组件的生命周期，还能监听子节点的生命周期，即普通的 div 也能监听到。
html
<template>
<div
v-if="!flag"
@vue:mounted="childMounted"
@vue:unmounted="childUnMount"
></div>
</template>动手实操
跳转预览：点击跳转
贡献者
duyidao 刀刀