首页 > 其他 > 详细

【Vue】父组件监听到子组件的生命周期

时间:2020-07-25 20:28:51      阅读:67      评论:0      收藏:0      [点我收藏+]

比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:

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

// Child.vue
mounted() {
  this.$emit("mounted");
}

以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:

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

doSomething() {
   console.log(‘父组件监听到 mounted 钩子函数 ...‘);
},

//  Child.vue
mounted(){
   console.log(‘子组件触发 mounted 钩子函数 ...‘);
},    

// 以上输出顺序为:
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

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

【Vue】父组件监听到子组件的生命周期

原文:https://www.cnblogs.com/vickylinj/p/13376414.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!