vue2中使用iframe嵌入地图,在地图页面中使用settimeout导致执行顺序出了问题,还有父子生命周期顺序导致的问题,通过事件监听解决

在 Vue 项目中使用 iframe 嵌入地图并通过条件判断加载不同的地图组件时，可能会遇到事件处理顺序的问题。如果在生命周期钩子中使用 setTimeout 来处理某些逻辑，可能会导致一些意外的行为和顺序问题。

为了确保事件按预期的顺序执行，可以尝试以下几个步骤：

1. 确保事件的触发顺序：

   • 确保事件在正确的时机触发，特别是涉及到 iframe 加载的情况。

2. 使用 Vue 的事件总线或 Vuex：

   • 如果多个组件之间需要协调，可以使用 Vue 的事件总线或 Vuex 来管理事件和状态。

3. 在 mounted 生命周期钩子中确保地图已经加载：

   • 确保 iframe 中的地图在 mounted 钩子执行时已经完全加载，可以通过监听 iframe 的 load 事件来确保。

以下是一个示例，演示如何实现这些步骤：

使用事件总线或 Vuex

如果你使用事件总线（Event Bus）来管理事件：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

在 home 组件中，根据条件判断加载不同的地图，并在地图加载完成后触发事件：

// Home.vue
<template>
  <div>
    <component :is="mapComponent" ref="mapComponent"></component>
  </div>
</template>

<script>
import { EventBus } from './eventBus';
import MapA from './MapA.vue';
import MapB from './MapB.vue';

export default {
  data() {
    return {
      mapComponent: null,
    };
  },
  created() {
    // 根据条件判断使用哪个地图组件
    if (someCondition) {
      this.mapComponent = 'MapA';
    } else {
      this.mapComponent = 'MapB';
    }
  },
  mounted() {
    // 监听地图加载完成事件
    EventBus.$on('mapLoaded', this.onMapLoaded);
  },
  methods: {
    onMapLoaded() {
      // 处理地图加载完成后的逻辑
      console.log('地图加载完成');
    },
  },
  beforeDestroy() {
    EventBus.$off('mapLoaded', this.onMapLoaded);
  },
};
</script>

在地图组件中，触发地图加载完成事件：

// MapA.vue
<template>
  <div>
    <iframe ref="mapIframe" src="map-url"></iframe>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  mounted() {
    // 监听 iframe 的加载事件
    this.$refs.mapIframe.addEventListener('load', this.onMapLoad);
  },
  methods: {
    onMapLoad() {
      // 触发地图加载完成事件
      EventBus.$emit('mapLoaded');
    },
  },
};
</script>

确保顺序执行

确保在地图加载完成后再触发其他事件或执行其他逻辑：

<template>
  <div>
    <component :is="mapComponent" ref="mapComponent"></component>
  </div>
</template>

<script>
import { EventBus } from './eventBus';
import MapA from './MapA.vue';
import MapB from './MapB.vue';

export default {
  data() {
    return {
      mapComponent: null,
    };
  },
  created() {
    // 根据条件判断使用哪个地图组件
    if (someCondition) {
      this.mapComponent = 'MapA';
    } else {
      this.mapComponent = 'MapB';
    }
  },
  mounted() {
    // 监听地图加载完成事件
    EventBus.$on('mapLoaded', this.onMapLoaded);
  },
  methods: {
    async onMapLoaded() {
      // 等待地图加载完成后，再执行其他逻辑
      await this.someAsyncOperation();
      console.log('地图加载完成并且其他逻辑执行完毕');
    },
    someAsyncOperation() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 1000); // 模拟异步操作
      });
    },
  },
  beforeDestroy() {
    EventBus.$off('mapLoaded', this.onMapLoaded);
  },
};
</script>

结论

通过使用事件总线或 Vuex 进行状态管理，并在适当的生命周期钩子中确保地图加载完成后再执行其他逻辑，可以确保事件按预期的顺序执行。此外，使用 async/await 来处理异步操作，可以使代码更加简洁和易读。