vue中iframe嵌套页面父子组件互相通信

//父传子页面

 <iframe id="mainIframe" name="mainIframe"  ref="iframe" :src="URL" frameborder="0" scrolling="auto"  style="height: 100%;"></iframe>
 <script>

  export default {
    data() {
      return {
        URL:'http://10.1.1.28:8081/#/',嵌套页面的地址
        obj:{
        	a:1,
        	b:2
			}
      };
    },
    mounted(){
		this.parent()
	},
    methods:{
		parent(){
				const mapFrame = this.$refs['iframe'];
		        const iframeWin = mapFrame.contentWindow;
		        iframeWin.postMessage(
		           this.obj,
		            '*'
		        );
				}

	}
}
 </script>
//irame'页面进行接收‘’
mounted(){
window.addEventListener("message", function (e) {
	console.log(e.data,'iframe接收父页面数据')
})
}

//iframe向父组件通信，子传父

sone(){
	this.val={
	c:1,
	d:2
	}
	window.parent.postMessage(this.val, "*");
}



//父页面接收iframe
mounted(){
	window.addEventListener('message', (messageEvent) => { 
		console.log(messageEvent.data)
	}）
}