在子页面的vue项目的App.vue的mounted中监听window的message事件触发多次相同的

在Vue项目中，如果你在一个子页面的`App.vue`组件的`mounted`生命周期钩子中监听`window`对象的`message`事件，并且发现触发了多次相同的事件，这通常是因为有重复的事件监听器注册了多次，或者是因为页面内部或外部代码在不断地触发`window.postMessage`方法。

要解决这个问题，你可以采取以下步骤：

1. 确保在`mounted`钩子中只添加一次事件监听器。你可以通过设置一个布尔变量来检查是否已经添加过监听器。
2. 如果你不需要在组件销毁时移除事件监听器，可以使用`Vue.nextTick`来确保DOM已经渲染完成后再添加监听器，这样可以避免由于DOM渲染导致的重复添加。
3. 检查`window.postMessage`是否被其他代码多次调用，可能是页面内部的JavaScript代码或者其他库代码。
4. 实现事件监听函数时，确保它能够处理重复的消息，并且在处理完后有适当的逻辑来防止消息的重复处理。

下面是一个基本的示例代码：

export default {
  data() {
    return {
      hasMounted: false, // 用于标记是否已经挂载
    };
  },
  mounted() {
    if (!this.hasMounted) {
      this.hasMounted = true;
      window.addEventListener('message', this.handleMessage);
    }
  },
  methods: {
    handleMessage(event) {
      // 处理消息的逻辑
      console.log('Received message:', event.data);

      // 确保消息只处理一次，可以通过检查事件对象的特定属性来实现
      // 例如，如果你使用postMessage传递JSON对象，可以检查其特定属性
      if (event.data && event.data.uniqueMessageId && this.hasHandledMessage(event.data.uniqueMessageId)) {
        return;
      }
      this.saveHandledMessage(event.data.uniqueMessageId);

      // 消息处理后的逻辑
      // ...
    },
    hasHandledMessage(messageId) {
      // 检查是否已经处理过这条消息
      // ...
      return false; // 假设消息未处理过
    },
    saveHandledMessage(messageId) {
      // 将处理过的消息记录下来
      // ...
    }
  },
  // ...
};

在上述代码中，我们使用`hasMounted`变量来确保`message`事件监听器只被添加一次。同时，在`handleMessage`方法中，我们实现了消息的去重逻辑，通过检查消息是否已经处理过，来避免重复处理。