父组件可以监听到子组件的生命周期吗

简介: 父组件可以监听到子组件的生命周期吗

比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理

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

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

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

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

相关文章
|
6天前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
17 0
|
JavaScript
Vue子组件监听父组件的事件
Vue子组件监听父组件的事件
266 0
Vue子组件监听父组件的事件
|
6天前
|
JavaScript
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
17 2
|
5天前
|
JavaScript
vue父组件点击事件向子组件传递值
vue父组件点击事件向子组件传递值
|
6天前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
17 0
|
6天前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
24 0
|
6天前
|
前端开发
react父组件props变化的时候子组件怎么监听?
react父组件props变化的时候子组件怎么监听?
64 0
|
6天前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
|
11月前
|
JavaScript
VUE中父组件传给子组件传值,watch第一次监听不到
VUE中父组件传给子组件传值,watch第一次监听不到
|
11月前
|
JavaScript
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
368 0