vue iframe 父传子跨域通信

在Vue中，父组件和子组件之间的通信可以通过props和$emit来实现。但是，由于浏览器的同源策略，如果父组件和子组件不在同一个域名下，就无法直接进行通信。这时候可以使用iframe来实现跨域通信。

以下是在Vue中使用iframe实现父组件向子组件传值的方法：

1.在父组件中定义一个iframe，并设置src属性为子组件的地址：

<template>
  <div>
    <iframe :src="childUrl" ref="childFrame"></iframe>
  </div>
</template>

2.在父组件中定义一个方法，用于向子组件发送消息：

methods: {
  sendMessageToChild(msg) {
    const childFrame = this.$refs.childFrame;
    childFrame.contentWindow.postMessage(msg, this.childUrl);
  }
}

3.在子组件中监听message事件，用于接收父组件发送的消息：

mounted() {
  window.addEventListener('message', this.receiveMessageFromParent, false);
},
methods: {
  receiveMessageFromParent(event) {
    if (event.origin !== this.parentUrl) {
      return;
    }
    const msg = event.data;
    // 处理接收到的消息
  }
}

其中，childUrl和parentUrl分别为子组件和父组件的地址。