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

egg:父组件监听子组件挂载并做对应的逻辑处理

1.在子组件中通过this.$emit触发父组件的事件

// Parent.vue
 <Child @mounted="doSomething"/>
 doSomething() {
  console.log('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 钩子函数 ... 
posted @   天官赐福·  阅读(156)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
返回顶端
点击右上角即可分享
微信分享提示