vue3中使用iframe嵌入vue2页面
vue3中使用iframe嵌入vue2页面或vue页面和iframe页面的相互传参问题
·
vue3中使用iframe嵌入vue2页面或vue页面和iframe页面的相互传参问题
记录一个开发过程中遇到的问题,Vue3项目中嵌入了一个iframe,iframe里面的是一个vue2项目的页面,是项目赶工计较着急,来不及把vue2集成到vue3中,这时候想到用Vue3和Vue2之间来回互调传参,下面提供解决思路。
Vue3 父组件
<template>
<div class="content">
<iframe
id="unityiframe"
ref="iframeRef"
name="iframeContain"
seamless
scrolling="yes"
:src="srcUrl"
style="width: 100%; height: 70vh; border: 0"
>
</iframe>
</div>
</template>
<script>
import { reactive, toRefs, onMounted, ref,watch, nextTick,
getCurrentInstance,} from "vue";
export default {
setup() {
//接受子组件穿过来的值
function handleMessage(event) {
console.log("子页面传过值event", event.data);
var datalist = event.data;
if (datalist) {
sendMessage();
}
}
// 调用vue中getCurrentInstance方法(此参考V2和V3中this.$refs区别)
const currentInstance = getCurrentInstance();
function sendMessage() {
// currentInstance.ctx.$refs是vue3的写法。vue2中是 this.$refs
if (currentInstance.ctx.$refs.iframeRef) {
//判断他不为空,可根据自己的页面判断
currentInstance.ctx.$refs.iframeRef.contentWindow.postMessage(
// 向子页面iframe传递
"aaa", //传递的参数
"http://10.1.0.238:88/#/workspace/formsPanel" //iframe的页面地址
);
}
}
nextTick(() => {
window.addEventListener("message", handleMessage);
});
return{
handleMessage,
currentInstance,
sendMessage
}
}}
</script>
Vue2 子组件(1)
mounted() {
//给父页面发送消息
window.parent.postMessage(
"111",
"http://10.1.0.238:8080/#/application/function"
);
//监听父页面发送过来的消息
window.addEventListener("message", this.handleMessageFromParent);
},
methods: {
// 接收父页面发送的消息
handleMessageFromParent(event) {
console.log("父页面传过值event", event.data);
},
Vue2 子组件(2)
mounted() {
//给父页面发送消息
window.parent.postMessage(
"111",
"http://10.1.0.238:8080/#/application/function"
);
window.addEventListener("message", (e) => {
//接收父页面发送的消息
console.log("e",e)
})
},
methods: {
更多推荐
已为社区贡献5条内容
所有评论(0)