最佳实践：vue2 父组件监听子组件生命周期钩子
HookEvent
源码地址：https://github.com/vuejs/vue/blob/master/src/core/instance/lifecycle.js#L314
export function callHook (vm: Component, hook: string) {
const handlers = vm.$options[hook]
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
try {
handlers[i].call(vm)
} catch (e) {
handleError(e, vm, `${hook} hook`)
}
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
}- 对外的生命周期函数需要主动捕获其过程发生的错误，避免整个Vue实例生成过程终止
- 生命周期函数存放位置
const handlers = vm.$options[hook] - 可以通过 on 进行监听事件 vm.emit('hook:' + hook)
vm._hasHookEvent
- 初始化事件相关
initEvents函数中赋值为 false - 事件注册实例方法
$on中赋值为 true callHoook函数中判断_hasHookEvent是否为true
源码地址：https://github.com/vuejs/vue/blob/master/src/core/instance/events.js#L52
export function eventsMixin (Vue: Class<Component>) {
const hookRE = /^hook:/
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$on(event[i], fn)
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}const hookRE = /^hook:/ 注册事件以 hook: 开头
实现方式
常规方式
子组件修改；
mounted() {
this.$emit("mounted");
}父组件中调用：
<Child @mounted="doSomething">Child>缺点： 需要修改子组件源码，增加相关 $emit 事件
$options方式
通过 refs 获取相关组件实例，然后增加相应的 lifecycle hook
mounted () {
const HelloWorldVmOption = this.$refs['HelloWorldRef'].$options
if (!HelloWorldVmOption['updated']) HelloWorldVmOption['updated'] = []
HelloWorldVmOption['updated'].push(() => {
...
})
}缺点： 由于 refs 只能在 mounted 及以后的生命周期中获取，因此这种方式只能监听子组件 mounted 以后的 lifecycle hook。
@hook:event
<Child @hook:mounted="doSomething">Child>在 vue2 中，完美解决！不需要修改源码~~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录