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

刀刀

6/17/2025

0 字

0 分钟

父组件监听子组件的生命周期， Vue2 可以使用 @hook 事件，@hook 事件是 Vue2.4.0+ 新增的一个特性，它允许开发者监听组件内生命周期钩子。

<template>
  <Son v-if="!flag" @hook:mounted="childMounted" @hook:unmount="childUnMount"></Son>
</template>

<script setup>
function childMounted() {
  console.log('子组件已挂载')
}

function childUnMount() {
  console.log('子组件已卸载')
}
</script>

但如果是 Vue3，则无法直接监听子组件的生命周期，因为 Vue3 中没有 @hook 事件。需要修改为 @vue 事件。

<template>
  <Son v-if="!flag" @vue:mounted="childMounted" @vue:unmount="childUnMount"></Son>
</template>

<script setup>
function childMounted() {
  console.log('子组件已挂载')
}

function childUnMount() {
  console.log('子组件已卸载')
}
</script>

这个方法不仅可以监听子组件的生命周期，还能监听子节点的生命周期，即普通的 div 也能监听到。