vue中内嵌iframe页面并进行传值

需求是把两个单独的系统在一个总的系统作为菜单进行免密登录，由于时间还有跨域和不同的token等问题，就使用了内嵌iframe，因为是不同的域名进入子系统也要本地存储一下（获取的user信息以及token传入到iframe子系统）

<template>
  <div class="hello">
    <div>
      <iframe src="http://xxxxxxxxxxxxxx" frameborder="0"  id="myIframe" ref="myIframe"></iframe>
    </div>
  </div>
</template>

export default {
  mounted() {
    this.iframeWin = this.$refs.myIframe.contentWindow;
    //最开始做的是点击事件是没有问题的  后面需要自动传值就不行  也试了模拟点击还是不行
    //原因是iframe还没加载完  所以使用onload
    document.getElementById("myIframe").onload=function(){
      this.fatherpost()
    };
  }
  methods：{
    fatherpost(e){//iframe传值
    	 this.iframeWin.postMessage({
    	     params:{
               data:data//传的数据
             }
    	 },'http://xxxxxxxxxxxxxx')
    },
  }
}

//iframe接收
export default {
  mounted() {
     window.addEventListener('message',function(e){
	   console.log(e.data)
     },false)
  }
}

//子传父的话   挂载和接收的方式都是差不多
window.parent.postMessage(message, targetOrigin, [transfer])