vue组件异步加载，数据相互依赖问题

组件数据异步加载，其他接口依赖异步数据

• 今天遇到这样一个情况，我有一个地图组件<map />,父组件中异步查询数据，回显到地图上。

注：异步获取经纬度，显示到地图上

因为数据和地图 都是异步的，所以哪个先完成不确定。

1. 如果地图先加载完毕，数据后回来，那么，运行正常
2. 但是，数据先回来，地图还没有加载完毕，那么就会报错。

解决思路

• 分开先后，当地图加载完毕，再请求接口

上代码

    //map 组件
    <div>
        <template>
            <el-amap vid="container" class="amap"/>
        </template>
    </div>
    <script>
    import { lazyAMapApiLoaderInstance } from "vue-amap";
        export default {
            mounted(){
                lazyAMapApiLoaderInstance.load().then(()=>{
                    //创建地图
                    this.map = new AMap.Map("container", {
                    zoom: this.zoom,
                    center: [116.397428, 39.90923],
                    lang: "zh_cn", //设置地图语言类型
                  });
                  //这里，高德地图api，当地图加载完毕时候触发
                  this.map.on('complete', function(){
                        // 地图图块加载完成后触发
                        //向父级触发一个方法，通知父级地图加载完毕
                        this.$emit("mapload")
                  });
                })
            }
        }
    </script>
复制代码

当子组件<map /> 加载完毕后，会向父组件触发一个方法mapload（自己定义），父组件监听该方法，然后调用 接口，异步加载数据，等数据请求回来后，再传递给<map/>，完成回显

//父组件
<template>
    <div>
        <map @mapload="mapload"/>
    </div>
</template>

<script>
import map from "./map.vue"
export default {
    methods:{
        mapload(){
            //代码到这里，表示地图已经加载完毕
            //ajax....
        }
    }
}
</script>
复制代码

写在最后

虽然代码很简单，但是，第一次使用地图，不熟悉高德地图api，没有了解到有地图加载完毕的回调函数，所以开始用 setTimeout勉强完成。
而且，第一次遇到，子组件有异步数据，父组件依赖子组件异步数据，请求接口的情况。特此，记录一下。