vue 嵌套的iframe子页面传数据 postMessage

Vue组件下嵌套了一个不同域下的子页面，iframe子页面不能直接获取到父页面的数据，即使数据存在localStorage中，子页面一样是获取不到的，所以只好使用postMessage传数据：

<iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>

父页面发送数据参数：

<script>
    export default {
        mounted() {
            let mapFrame = this.$refs['mapFrame']
            if (mapFrame.attachEvent){  //兼容浏览器判断
                mapFrame.attachEvent("onload", function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage(data,'*')
              //data传递的参数   *写成子页面的域名或者是ip
                })
            } else { 
                mapFrame.onload = function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage(data,'*')
                } 
            }
            
        }
    }
</script>

子页面接收参数：

<script>
  export default{
    mounted(){
      window.addEventListener('message',function(e){               
            console.log(e.origin,e.data)//子页面接收参数
        })  
     }

}
    
</script>