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)

原文地址:https://www.cnblogs.com/mengfangui/p/12546866.html

时间: 2024-09-28 10:16:49

vue 父组件监听子组件生命周期的相关文章

vue2.x 父组件监听子组件事件并传回信息

利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组件中使用$emit发送事件 this.$emit('from-child-msg', '这是子组件传递的消息');

vue中父组件如何监听子组件值的变化

vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值: 3:父组件可以通过this.$refs.name.去访问子组件的值或方法: 4:子组件可以通过this.$parent.去访问父组件的值或方法: 总结了一下,感觉好像挺全面的,好像不缺啥了.... 但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

vue系列(一)子组件和父组件

父组件传递数据到子组件props 父组件 <template> <div class="main"> <div class="top"> <span :class="{action:ind===index}" v-for="(item,index) in lanMenu" v-on:click="clickMenu(index,item.con)">{{ite

Vue中利用$emit实现子组件向父组件通信

Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow="show" @hidechild="hidechild"></child> <button @click="show=true">显示子组件</button> </div> </templa

Vue父组件如何调用子组件(弹出框)中的方法的问题

如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的实例,可以理解为绑在了DOM结构上那如果我偏偏想调用的是这个子组件(弹出框)中的方法,但又不想要弹出框显示,怎么办呢?解决方法:把v-if换成v-show,这样DOM元素会一直存在于父组件中,子组件的方法也就能调用了 原文地址:https://www.cnblogs.com/zsg88/p/1099

父组件中调用子组件的方法和属性

方案:利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el) 1.当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom,对dom进行原生的操作 <div class="foods-wrapper" ref="foods-wrapper"> 通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也不能用) let menuList