当前位置：首页 > news >正文

vue2和vue3组件如何监听子组件生命周期

news 来源：原创 2025/5/3 11:32:39

在 Vue 中监听子组件的生命周期是一个常见需求，但 Vue 官方并不直接推荐这么做，因为这会打破组件的封装性。但在**一些特定场景（如自动化监控、封装逻辑复用）**下仍是有意义的。

下面分别讲解 Vue 2 和 Vue 3 中如何监听 子组件的生命周期。

✅ Vue 2 中监听子组件生命周期

Vue 2 没有内建的方式监听子组件的生命周期，但可以用以下方式实现：

✅ 方法一：在子组件中使用 `$emit` 通知父组件

<!-- Child.vue -->
<template><div>子组件</div></template>
<script>
export default {mounted() {this.$emit('mounted')},destroyed() {this.$emit('destroyed')}
}
</script>

<!-- Parent.vue -->
<template><Child @mounted="onChildMounted" @destroyed="onChildDestroyed" />
</template><script>
import Child from './Child.vue'export default {components: { Child },methods: {onChildMounted() {console.log('子组件挂载了')},onChildDestroyed() {console.log('子组件被销毁了')}}
}
</script>

✅ 方法二：通过 `ref` 调用子组件方法（变通方案）

<Child ref="child" />

父组件中在 mounted 钩子中访问子组件：

mounted() {this.$refs.child.doSomething()
}

✅ Vue 3 中监听子组件生命周期

Vue 3 引入了 defineExpose，并支持 onMounted 等生命周期钩子组合式使用。监听子组件生命周期的方法如下：

✅ 方法一：事件方式（推荐）

<!-- Child.vue -->
<script setup>
import { onMounted, onUnmounted, defineEmits } from 'vue'const emit = defineEmits(['mounted', 'unmounted'])onMounted(() => emit('mounted'))
onUnmounted(() => emit('unmounted'))
</script>

<!-- Parent.vue -->
<template><Child @mounted="onChildMounted" @unmounted="onChildUnmounted" />
</template><script setup>
import Child from './Child.vue'function onChildMounted() {console.log('子组件挂载')
}function onChildUnmounted() {console.log('子组件卸载')
}
</script>

✅ 方法二：ref + `expose`（组合式 API）

<!-- Child.vue -->
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'const status = ref('idle')
onMounted(() => {status.value = 'mounted'
})defineExpose({ status })
</script>

<!-- Parent.vue -->
<template><Child ref="childRef" />
</template><script setup>
import { onMounted, ref } from 'vue'
import Child from './Child.vue'const childRef = ref(null)onMounted(() => {console.log('子组件状态:', childRef.value?.status)
})
</script>

✅ 总结对比

方法	Vue 2	Vue 3	推荐用途
`$emit` 生命周期	✅	✅	监听子组件挂载/卸载（最通用）
`ref + expose`	❌	✅	访问子组件状态或方法
`$refs + 方法调用`	✅	✅	访问子组件实例（临时方案）