简单vue父子iframe页面跨域通信传值postMessage()

1.子页面向父页面传值

a.vue 父页面 b.vue子页面

//b.vue 子级给父级发送数据
methods:{
     
	sendMessage(){
     
		window.parent.postMessage(data, "*");  //data传递的数据，“*”跨域的域名  *代表所有
	}
}


//a.vue 父级页面接受数据
mounted(){
     
//父页面监听发送过来的消息
	window.addEventListener("message", this.handleMessage);
},
methods:{
     
//监听回调
	handleMessage(event){
     
		const data = event.data; //event.data里就是传过来的数据
	}
}

2.父页面向子页面传值

a.vue 父页面 b.vue子页面

//a.vue 父级给子级发送数据
methods:{
     
//data传递的数据
	 sendMessage(data) {
     
	 //判断子级的节点存在，$refs取vue节点
      if (this.$refs.xxx) {
     
        let iframeWin = this.$refs.xxx.contentWindow;  //获取这个属性
        iframeWin.postMessage(data, "*");   //发送数据
      }
    },
}


//b.vue 子级页面接受数据（和父级监听一样）
mounted(){
     
//父页面监听发送过来的消息
	window.addEventListener("message", this.handleMessage);
},
methods:{
     
//监听回调
	handleMessage(event){
     
		const data = event.data; //event.data里就是传过来的数据
	}
}

总结：父级和子级的监听都是一样的，区别在于发送数据时，子级可以直接调用window.parent拿到父级页面;父级通过拿到iframe页面的dom。都是使用postMessage()方法发送数据。