vue中嵌入原生iframe并传递参数

父传子

// 父页面main.html传递参数

<template>
<div>
<iframe :src="frameUrl" ref="iframe" width="100%" height="100%" frameborder="0" scrolling="auto" @load="loaded"></iframe>
</div>
</template>

<script>
export default {
	name: 'main',
	data(){
		return {			
			frameUrl: '../../../static/child.html',

			params:{
				id:'参数Id',
				name:'参数名称'
			},
		}
	},
	mounted (){
		var _self=this;
		let myFrame = this.$refs['iframe']
		if (myFrame.attachEvent) { // 兼容浏览器判断
			myFrame.attachEvent('onload', function() {
				const iframeWin = myFrame.contentWindow
				iframeWin.postMessage(_self.params,'*')
			})
		} else {
			myFrame.onload = function() {
				const iframeWin = myFrame.contentWindow
				iframeWin.postMessage(_self.params,'*')
			}
		}	
	},
	methods: {	
		loaded() {
			let vm = this.$refs.iframe.contentWindow.vm
		}
	} 
}
</script>

// 子页面child.html接收参数
<script>
var id,name;	
window.addEventListener('message', (event) => {				
			id=event.data.id;
			name=event.data.name;
			console.log("我是父页面传递过来的******："+id+name);
	　　})
</script>

子传父

//child.html子页面传参

<script>
window.parent.postMessage({
        params: {
            id: '子页面Id',
            name:'子页面名称'
        }
 }, '*')
</script>

//main.html父页面接收

<script>
mounted (){
    let id,name;
    window.addEventListener("message", (event) => {				
			id=event.data.id;
			name=event.data.name;
			console.log("******"+id+name);
	　　})
}
</script>

参考网址：https://zeyu7.com/vue-iframechuan-zhi/