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

Posted mengfangui

tags:

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

1、方法一

使用$on和$emit

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

2、使用hook

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log(‘父组件监听到 mounted 钩子函数 ...‘);
},
    
//  Child.vue
mounted(){
   console.log(‘子组件触发 mounted 钩子函数 ...‘);
},    
    
// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...     

 

hook的原理是:vue生命周期钩子函数

(1)vue源码

vm._self = vm
initLifecycle(vm) // 初始化生命周期
initEvents(vm) // 初始化事件
initRender(vm)
callHook(vm, ‘beforeCreate‘)
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, ‘created‘)

(2)callHook源码

export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook] // 选项当中的生命周期函数
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit(‘hook:‘ + hook)
  }
  popTarget()
}

注意:vm.$emit(‘hook:‘ + hook),即可以触发钩子函数。前提条件是_hasHookEvent为true

(3)_hasHookEvent源码

const hookRE = /^hook:/ // 以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++) {
      vm.$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
}

即:

当使用了$on方法监听事件时,如果事件名以 hooks: 作为前缀,那么这个事件会被当做hookEvent,注册事件回调的同时,vm._hasHookEvent会被置为true,当使用callHook调用生命周期函数时,由于_hasHookEventtrue,所以会$emit(‘hooks:xxx‘),注册的生命周期函数就会执行。

  最后的最后:

添加钩子的方法有:

  • Vue组件选项中添加;
  • 在模板中通过@hooks:created这种形式;
  • vm.$on(‘hooks:created‘, cb)或者 vm.$once(‘hooks:created‘, cb)

 

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

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

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

vue 生命周期 和 生命周期的执行顺序

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

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

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