iframe 父子组件通信 vue3

父组件

<template>
    <div>
        <!-- 测试iframe 父子通信 -->
        <h1>父组件</h1>
        <iframe src="http://localhost:8080/#/testChild" width="80%" height="100px" ref="childIframe" id="childIframe"
            scrolling="auto">
            当前使用的浏览器不支持iframe
        </iframe>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from "vue"
const { proxy } = getCurrentInstance();

const payEvent = (e) => {
    console.log('子传父的数据：', e.data);
}

onMounted(() => {
    // 父传子
    const oIframe = document.getElementById("childIframe").contentWindow;
    let oIframeDom = document.getElementById("childIframe");
    let data = {
        form: "parent page",
        code: 200,
        data: "1",
        type: "view"
    };
    oIframeDom.onload = () => {
        oIframe.postMessage(data, "*");
    };


    // 子传父-父接收
    window.addEventListener('message', payEvent)
})
onUnmounted(() => {
    // 父移除监听函数
    window.removeEventListener('message', payEvent)
})
</script>

子组件

<template>
    <div>
        <!-- 测试iframe 父子通信 -->
        iframe 子组件
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, onUpdated, watch, computed } from "vue"
onMounted(() => {
    // console.log('子组件 mounted');
    //子传父
    let data = {
        judge: false,
    }
    window.parent.postMessage(data, '*')


    //父传子-子接收
    window.onload = () => {
        window.addEventListener('message', (event) => {
            console.log('监听父页面向子页面的传参', event.data)
        })
    }
})



</script>
<script>
</script>

路由：

  {
    path: "/testChild",
    name: "testChild",
    component: () => import("@/views/components/testChild.vue"),
    meta: {
      title: "testChild",
    },
  },
  {
    path: "/testParent",
    name: "testParent",
    component: () => import("@/views/components/testParent.vue"),
    meta: {
      title: "testParent",
    },
  },