Vue 多页面应用中 iframe子页面给父页面传值通信
1.父亲页面设置监听信息
<script>
export default {
created(){
this.$nextTick(function () {
window.addEventListener('message',(e)=>{
let {title,href} = e.data;
if(title&&href){
this.addTab(title,href);
}
})
})
}
</script>
e.data
可以获取到自页面传递过来的对象参数
2.iframe 子页面发送 postMessage 事件
<template>
<div>
<el-button type="error" @click="openTab">打开标签</el-button>
</div>
</template>
<script>
export default {
methods:{
openTab(){
window.parent.postMessage({
title:'卡片管理',
href: "./accountManage.html"
},'*');
}
}
}
</script>
parent.postMessage
发送事件,注意这里要使用parent的postMessage !!,第一个参数是一个对象 ,第二个参数是能接受请求的地址,一般 *
即可