vue项目中与内嵌iframe传值

温馨提示：传的值最好不要是复杂数据类型，如果穿复杂数据类型的话 ，会有延迟，很慢

 

 

vue项目作为父级，内嵌一个iframe

给iframa传值的写法

//html结构
 <button @click="fatherpost">给iframe传值</button>
 <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px"         
         height="500px">
 </iframe>

//挂载在mounted中
mounted() {
    this.iframeWin = this.$refs.iframe.contentWindow;
}
methods：{
    fatherpost(e){    //点击给iframe传值
    	 this.iframeWin.postMessage("我是来自父页面的data", '*')
    },
}


//iframe中接受消息，在iframe项目中写监听函数
 window.addEventListener('message',function(e){
			    var Date=e.data;
			    console.log(Date)
},false);

iframe项目给vue项目的传值

//在iframe项目中添加代码
<button @click="sonpost">向父亲传值</button>
methods: {
    	sonpost(){
    		 window.parent.postMessage("我是子页面的test！", '*');

    	}
},


//在vue项目中添加接收代码

window.addEventListener('message', function(e){
		    var Date=e.data;
		    console.log(Date)
});