vue如何用postmessage和iframe

Vue可以使用`postMessage`和`iframe`来实现跨域通信。下面是一个简单的示例：

首先，在你的Vue组件中创建一个`iframe`元素，并添加一个事件监听器来接收消息：

<template>
  <div>
    <!-- 创建一个空的iframe元素 -->
    <iframe ref="iframe" src="about:blank" style="display: none;"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听message事件，接收来自iframe的消息
    window.addEventListener('message', this.receiveMessage, false)
  },
  methods: {
    // 处理收到的消息
    receiveMessage(event) {
      // 检查消息源是否与iframe的源相同
      if (event.origin !== 'http://example.com') return

      // 处理消息数据
      const message = event.data
      console.log('Received message:', message)
    }
  }
}
</script>

然后，在你的Vue组件中使用`postMessage`发送消息至`iframe`：

<script>
export default {
  methods: {
    sendMessage() {
      // 获取iframe元素
      const iframe = this.$refs.iframe

      // 发送消息至iframe的源
      iframe.contentWindow.postMessage('Hello from Vue', 'http://example.com')
    }
  }
}
</script>

在上述示例中，`postMessage`方法用于将消息发送到指定的`iframe`源。在`receiveMessage`方法中，通过监听`message`事件来接收来自`iframe`的消息，并且通过`event.origin`来验证消息来源。这样，Vue组件和`iframe`之间就可以进行安全的跨域通信了。