码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-28 14:15:59      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:row   code   逻辑   -o   this   frame   引用   ssis   一个   

如果父组件监听到子组件挂载mounted做一些逻辑处理

1、使用on和emit

子组件emitemit触发一个事件,父组件on监听相应事件。

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

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

2、hook钩子函数

这里一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook来监听即可,代码重写如下:

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

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

 

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

标签:row   code   逻辑   -o   this   frame   引用   ssis   一个   

原文地址:https://www.cnblogs.com/baller/p/13390480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!