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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐