Vue 多页面应用中 iframe子页面给父页面传值通信

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 ！！,第一个参数是一个对象 ，第二个参数是能接受请求的地址，一般 * 即可