vue中使用iframe时在iframe挂载完成后向其内部传值后如何等待iframe内部使用postmessage通信结束再操作

在 Vue 中使用 iframe，并在 iframe 挂载完成后向其内部传值，并等待 iframe 内部使用 postMessage 通信结束后再进行操作，可以通过以下步骤实现：

1. 在 Vue 组件中创建一个 Promise 对象，用于等待通信结束。
2. 在 iframe 的 `onload` 事件中，发送 postMessage 给 iframe 内部，传递需要的值。
3. 在接收 postMessage 的地方，添加一个消息处理函数。这个函数负责接收消息，并将消息内容传递给 Promise 对象的 resolve 函数。
4. 在发送 postMessage 的地方，等待 Promise 对象的 resolve 函数被调用后再执行后续操作。

下面是一个示例代码：

<template>
  <div>
    <iframe ref="myIframe" src="https://example.com" @load="handleIframeLoad"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建 Promise 对象
    const messagePromise = new Promise((resolve) => {
      // 消息处理函数
      const handleMessage = (event) => {
        // 验证消息来源，可选
        if (event.source === this.$refs.myIframe.contentWindow) {
          // 将消息内容传递给 Promise 的 resolve 函数
          resolve(event.data);
        }
      };

      // 监听 postMessage 事件
      window.addEventListener("message", handleMessage, false);
    });

    // 等待通信结束后执行后续操作
    messagePromise.then((data) => {
      // 在这里执行需要等待通信结束后的操作，例如更新数据等
      console.log("Received message from iframe:", data);
    });
  },
  methods: {
    handleIframeLoad() {
      const iframe = this.$refs.myIframe;

      // 向 iframe 内部发送 postMessage
      iframe.contentWindow.postMessage("Hello from Vue", "*");
    },
  },
};
</script>

在上述示例中，我们创建了一个 messagePromise 对象，并通过监听 message 事件来接收 postMessage 通信。当消息到达时，我们将消息内容传递给 Promise 的 resolve 函数。然后，通过调用 messagePromise 的 then 方法来等待通信结束后执行后续操作。在 iframe 的 `onload` 事件中，我们发送 postMessage 给 iframe 内部，传递需要的值。

请注意，示例中的代码仅供参考，具体实现方式可能因应用场景的不同而有所调整。