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

Posted 2023-05-06

参考技术A 在实际开发过程中，在某些业务场景下会用到 父组件监听子组件的生命周期，从而实现某些业务需求，现提供以下几种方式。
一、通过 $emit 实现
这里以 mounted 为例，在父组件 Parent 和子组件 Child 中，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

以上方法虽然可行，但每次都需要手动写一次 $emit 触发父组件的事件。

更简单的方式可以在父组件引用子组件时通过 @hook 来监听生命周期。

还是父组件 Parent 和子组件 Child，@hook 的写法如下：

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

vue生命周期函数区别作用

参考技术A created:html加载完成之前，执行。执行顺序:父组件-子组件

mounted:html加载完成后执行。执行顺序:子组件-父组件

methods:事件方法执行。

watch:去监听一个值的变化，然后执行相对应的函数。

computed:computed是计算属性，也就是依赖其它的属性计算所得出最后的值