首页vue3 父子组件生命周期关系

vue3 父子组件生命周期关系

时间: 2023-10-21 22:37:29 浏览: 94

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

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现： // Parent.vue <Child mounted=doSomething/> // Child.vue mounted() { this.$emit(mounted); } 以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示： // Parent.vue <Child hook:mounted=doSomething></Child> doSomething

Vue3 的父子组件生命周期关系与 Vue2 相似，但有一些区别。在 Vue3 中，父组件的 `onBeforeMount` 和 `onMounted` 钩子函数会先于子组件执行。在子组件的 `onBeforeMount` 和 `onMounted` 钩子函数执行之前，父组件的 `setup` 函数已经执行完毕，因此父组件可以通过 `props` 向子组件传递数据。在父组件的生命周期中，`onBeforeUpdate` 和 `onUpdated` 钩子函数也会在子组件的生命周期之前执行。在子组件的生命周期中，`onBeforeUnmount` 和 `onUnmounted` 钩子函数会在父组件的生命周期之后执行。总的来说，父子组件的生命周期执行顺序如下： 1. 父组件 `setup` 2. 父组件 `onBeforeMount` 3. 子组件 `setup` 4. 子组件 `onBeforeMount` 5. 子组件 `onMounted` 6. 父组件 `onMounted` 7. 父组件 `onBeforeUpdate` 8. 子组件 `onBeforeUpdate` 9. 子组件 `onUpdated` 10. 父组件 `onUpdated` 11. 父组件 `onBeforeUnmount` 12. 子组件 `onBeforeUnmount` 13. 子组件 `onUnmounted` 14. 父组件 `onUnmounted`

阅读全文