Vue中父组件能否监听子组件的生命周期?

4,303 阅读1分钟

看到如题这样的反问句,你会给出什么回答呢?大多数人哪怕不知道也肯定会给出肯定的答案,因为既然这么问了,那一定不会是捕风捉影嘛~ 哈哈哈!!!

对于这个问题,答案确实是:可以!

那要怎么实现呢?

方法一

使用$emit

// 父组件代码:
<child @created="doSomething" />

// 子组件代码:
created() {
    this.$emit('created')
}

这样当子组件调用了created钩子的时候,就会触发父组件的doSomething的方法了。

然而,这样做功能是实现了,但是似乎不够优雅!有没有更优雅的方式呢?

反问句又来了...就问你怕不怕?

好吧,答案还是:肯定的!

方法二:

使用@hook:

// 父组件代码
<child @hook:created="doSomething"/>

什么?这样就完事了?

没错,这样就完事了!都没有子组件什么事儿...

@hook:是个啥?怎么都没见过?

确实,连官网都没有hook的说明!这时候,就只能祭出【原码】来了:

原码解析:

eventsMixin方法是检查v-on监听的事件名是否以hook:开头,如果是则将对应生命同期的`_hasHookEvent`值设置为true; 如果`_hasHookEvent`为true,则会触发`$emit('hook:' + 对应的生命周期钩子)`

由此可见,方法二的原理跟方法一其实是一样的,但是,框架已经帮我们处理好了!优雅而方便