iframe页面向vue父页面传值，vue页面向iframe页面传值

1.iframe页面向vue父页面传值
vue代码

<template>
	<div>
		<iframe id="iframe"></iframe>
	</div>
</template>
<script>
	export default { 
		data(){
			return {
				iframeData: null
			}
		},
		mounted(){
			let that = this;
	        window.addEventListener("message", function(e) {
		         that.iframeData = e.data
		    });
		}
	}
</script>

iframe代码

<script>
	let message = 1;
    window.parent.postMessage(message,"*");
</script>

2.vue页面向iframe页面传值
vue代码

<template>
	<div>
		<iframe id="iframe" ref="iframe"></iframe>
	</div>
</template>
<script>
	export default { 
		mounted(){
			this.iframe = this.$refs.iframe
      		this.iframeWindow = this.iframe.contentWindow
      		let message = 1
      		this.iframeWindow.postMessage(message, '*')
		}
	}
</script>

iframe代码

<script>
	window.addEventListener('message', function (e) {
		console.log(e.data)
	}        
</script>