关于vue中使用ifarme内嵌页面数据交互

在前端开发中避免不了会内嵌其他网页，这时候就可以用ifarme标签来实现，但是有一个问题，怎么实现两个页面的参数传递呢？

第一种情况: ifarme内嵌页面向父级vue页面传递参数

内嵌页面在需要传参的方法写入：

 window.parent.postMessage({
                  data:{url:"数据",data:"数据"}
            }, '*'); 

vue父级页面接受

 mounted(){
      window.addEventListener('message', this.handleMessage)
 },
 methods：{
        handleMessage(event){//event.data为传递的参数
        try{
           if(event.data.data.hasOwnProperty("url")){
              //这里的判断是因为此方法会多次触发，通过参数是否存在可以判断是否为子页面传递的参数，再做出相应的操作
           }
        }catch{
        }   
 }

第二种情况 父级向子级传参

<iframe name="child" ref="child" id="child" :src="iframeSrc"   frameborder="0" scrolling="auto" ></iframe>

//更改ifarme里面的参数变量 Data就为内嵌页面的数
this.$refs.child.contentDocument.defaultView.vm_child.Data= '更改';

第二种方法
 

//可以采用url拼接参数，内嵌页面写方法获取
https://ifarme路径?startDate=${this.startDate}&endDate=${this.endDate}&deptName=${this.queryForm.deptName}&admin=${this.queryForm.admin}&picConfirmCont=${this.picConfirmCont}`

完毕！！！ 如有欠缺，请同行大神指教