父组件
<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",
},
},