vue中父子组件挂载执行顺序为:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

但是有些情况,我们需要父组件mounted之后再次执行子组件的mounted,比如父组件mounted时会调用接口拿到一些数据之后再执行子组件mounted里的方法。

如何在父组件mounted之后再执行子组件的mounted?

父组件:

 async mounted() {
     // _isMounted是当前实例mouned()是否执行 此时为false
      window.parentMounted = this._isMounted;
}

子组件:

 mounted() {
    // 为了等待父组件的mounted执行完成之后
    let pMountedTimer = window.setInterval(() => {
      if (window.parentMounted) {
        window.clearInterval(pMountedTimer);
        // 下面就可以写子组件想在mounted时执行代码(此时父组件的mounted已经执行完毕)

        console.log(父组件的mounted执行完毕!)
      }
    }, 500);
  },


 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐