Vue父组件mounted执行完后再执行子组件mounted

===================================================================

我们在父组件中的 mounted 生命周期钩子函数中执行百度地图的初始化创建；

在子组件的 mounted 中，调用接口，将数据坐标点添加到地图上。

...

现在这样可能会报错，因为父组件中的 map 还没创建成功。必须确保父组件的 map 创建完成，才能使用 this.$parent.map 的方法。

那么，现在的问题是：如何保证父组件 mounted 结束后再进行子组件 mounted ？

深入分析

===================================================================

你需要了解父子组件生命周期的执行顺序

父子组件生命周期执行顺序

---

父组件先进行创建，在挂载(mounted)前，子组件进行创建+挂载，子组件挂载完成后父组件挂载。

整个顺序就是：

父组件：beforeCreate

父组件：created

父组件：beforeMount

子组件：beforeCreate

子组件：createc

子组件：beforeMount

子组件：mounted

父组件：mounted

可以看出是先子组件 mounted 之后父组件 mounted，那么，如何实现父组件 mounted 完毕后再子组件 mounted 呢？

解决办法

===================================================================

【思路】 通过打印 this 发现，有一个 _isMounted 属性，表示当前是否挂载完毕（true：挂载完毕，false：没有挂载完成），在父组件挂载前将 _isMounted 存在 window 中，挂载后更新 _isMounted。在子组件 mounted 中添加定时器，根据 _isMounted 判断是否执行初始化方法。

// 父组件

beforeMount() {

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

},

mounted() {

await GaodeMap().then(() => {

// …

})

window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为true

}

// 子组件

mounted() {

let pMountedTimer = window.setInterval(() => {

if (window.parentMounted ) {

window.clearInterval(pMountedTimer)

// 下面就可以写子组件想在mounted时执行代码（此时父组件的mounted已经执行完毕）

this.initData()

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
oid开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！