父组件可以监听到子组件的生命周期吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了父组件可以监听到子组件的生命周期吗?相关的知识,希望对你有一定的参考价值。

参考技术A 比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:

以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:

当然 @hook 方法不仅仅是可以监听 mounted,其它的生命周期事件,例如:created,updated 等都可以监听。

Vue 的父组件和子组件生命周期钩子执行顺序

参考技术A 本文抄的
原文链接: https://www.cnblogs.com/wtsx-2019/p/12411987.html
渲染过程:父组件挂载完成一定是等子组件都挂载完成后,才算是父组件挂载完,所以父组件的mounted在子组件mouted之后。父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子组件更新过程:

影响到父组件: 父beforeUpdate -> 子beforeUpdate->子updated -> 父updated

不影响父组件: 子beforeUpdate -> 子updated

父组件更新过程:

影响到子组件: 父beforeUpdate -> 子beforeUpdate->子updated -> 父updated

不影响子组件: 父beforeUpdate -> 父updated

销毁过程:父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

看起来很多好像很难记忆,其实只要理解了,不管是哪种情况,都一定是父组件等待子组件完成后,才会执行自己对应完成的钩子,就可以很容易记住

以上是关于父组件可以监听到子组件的生命周期吗?的主要内容,如果未能解决你的问题,请参考以下文章

【技术】Vue 父组件如何监听子组件的生命周期

Vue-的父组件和子组件生命周期钩子函数执行顺序

面试问你:你知道父子组件在执行生命周期时的顺序吗?

Vue 的父组件和子组件生命周期钩子执行顺序

简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

vue父组件与子组件生命周期钩子顺序是啥?