【vue与iframe通讯】

在Vue中，与iframe进行通信可以通过几种方式实现：

1. 通过window.postMessage()方法。
2. 通过访问iframe的contentWindow属性。

以下是使用window.postMessage()方法进行通信的示例代码：

父页面（Vue组件）:

<template>
  <div>
    <iframe ref="iframe" src="iframe.html"></iframe>
    <button @click="sendMessage">发送消息给iframe</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    sendMessage() {
      const message = { action: 'someAction', data: 'someData' };
      this.$refs.iframe.contentWindow.postMessage(message, '*');
    }
  }
}
</script>

iframe页面:

// iframe.html 中的 JavaScript
window.addEventListener('message', function(event) {
  const message = event.data;
  if (message.action === 'someAction') {
    // 处理消息
    console.log('收到的数据:', message.data);
  }
});

在这个例子中，当用户点击按钮时，父页面向iframe发送了一个消息。iframe页面监听到消息后进行处理。

请注意，在实际应用中，你可能需要对消息进行验证，以确保它们来自于预期的源。这可以通过检查event.origin或event.source属性来实现。