vue3+ts实现和iframe互相传值

在 Vue 3 中使用 TypeScript 实现和 iframe 互相传值，可以通过两个步骤实现：

1. 在 Vue 3 中使用 ref 定义一个变量，用于存储 iframe 的引用：

import { ref } from 'vue';

export default {
  setup() {
    const iframeRef = ref<HTMLIFrameElement | null>(null);

    return {
      iframeRef
    }
  }
}

2. 在 Vue 3 中使用 postMessage() 方法向 iframe 发送数据：

const sendDataToIframe = (data: any) => {
  if (iframeRef.value) {
    iframeRef.value.contentWindow?.postMessage(data, '*');
  }
}

在 iframe 中接收数据，可以通过监听 window 对象的 message 事件来实现：

window.addEventListener('message', (event) => {
  // 处理接收到的数据
});

在 iframe 中向父窗口发送数据，则可以使用以下代码：

window.parent.postMessage(data, '*');

以上就是在 Vue 3 中使用 TypeScript 实现和 iframe 互相传值的方法。