关于使用iframe的父子页面进行简单的相互传值

两种

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

第一种：

 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,'*')
                } 
            }
            
        }

 mounted(){     //写子页面中
      window.addEventListener('message',function(e){               
            console.log(e.origin,e.data)//子页面接收参数
        })  
     }

第二种：

mounted  (){  //写父页面

  //给子页面传入数据
            function toChildValue(){
                var txt = '这是父页面给子页面的数据';
                return txt;
            }

}

mounted（）{    //写子页面

             //获取父页面传来的数据
            var getParentVule = window.parent.toChildValue();
            console.log(getParentVule)

}

具体哪个好用，自己试试吧