VUE 使用postMessage数据传递

场景假设：从当前页面A打开B页面，B页面操作数据后需要触发A页面的接口更新显示。

1、A页面操作 （接收数据触发事件方）

window.addEventListener('message', (e) => { console.log(e.data) }, false)  // mounted

methods: {
	toBHtml() { // 点击跳转到B页面 触发一次消息通知B页面来源方***
		const OtherWindow = window.open('http://xxx.com/x.html')
		setTimeout(_ => {
			OtherWindow.postMessage('formA', 'http://xxx.com/x.html')
		}, 3000) // 处理异步
	}
}

2、B页面操作（派发数据方）

data: () => ({
	postMessageObj: null
}),
mounted() {
	window.addEventListener('message', (e) => { this.postMessageObj = e }, false) // e: { data: 'formA', ... }
},
methods: {
	onClickSave() {
		this.postMessageObj.source.postMessage('fromB', 'http://xxx.com/A.html')
	}
}

###A页面点击打开新窗口B ，新窗口B操作后触发onClickSave事件，这时A页面的message监听会获取到formB