Vue 中iframe引用html页面之实现页面交互

iframe嵌入html核心代码：

<iframe   src="/static/test.htm"   :style="{width: width, height:height}" frameborder="0"   ref="iframeDom"  ></iframe>

1.从父页面发送数据到子页面

//父页面
		let iframeWin = this.$refs.iframeDom.contentWindow;
		let data = '';//data需要传给子页面的数据
		iframeWin.postMessage(data,"*")//发送给子页面
		
//子页面接收
window.addEventListener('message', function(event) {
   //业务逻辑处理
   //、、、、、、
}, false);

2.子页面发送数据到父页面

//子页面发送数据到父页面
let data = '';//data需要传给父页面的数据
window.parent.postMessage(data, '*')

//父页面接收
mounted(){
	  window.addEventListener('message', this.handleMessage)
	},
methods:{
			//接收方法
		 handleMessage(event){
		 //业务逻辑处理
		 }
	 }