vue项目使用postMessage和eventBus进行窗口和组件间数据通信

先来说说什么是postMessage：

postMessage是h5引入的API,postMessage方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。

场景：

今天在vue项目中本来想使用eventBus(中央事件总线)进行组件间通信的。但是发现$emit后，另外一个组件没有收到消息。我检查了一下，发现其中一个组件是被另外一个组件使用iframe嵌套的，而 $emit无法突破iframe传递消息。

解决办法：

查了一下发现可以使用h5的postMessage先把消息传递到iframe的父组件，再由父组件使用eventBus把消息通知另外一个组件

代码示例:

被A嵌套的a组件：

window.parent.postMessage({ event: 'update' }, '*')

嵌套a的父组件A:

...
<iframe :src="src"></iframe>
...
import eventBus from '../eventBus.js'

...
data(){
  	return{
  		src:'a组件的路由地址'
  	}
},
mounted() {
    window.addEventListener('message', (e) => {
      if (e.data.event === 'update') {
        eventBus.$emit('update');
      }
    });
},
...

另外一个B组件：

import eventBus from '../eventBus.js'
...
mounted() {
    eventBus.$on('update', this.updateList)
},
beforeDestroy() {
    eventBus.$off('update')
},
methods:{
    updateList(){
    	...
    }
}
...

参考文献：
EventBus from iframe to parent
前端爬坑日记之vue内嵌iframe并跨域通信