vue项目如何使用postmessage通信？

Question

因需要要将多个vue项目整合到一个项目，所以首先想到了iframe嵌入的方式，但是在使用postmessage的时候遇到一些问题，在接受信息的时候会执行两次，一次有值一次没值：

// 父组件

<template>
  <iframe id='monitor' @load="postMsg" ref="monitor" width="100%" height="100%" src="http://localhost:2000" frameborder="0"></iframe>
</template>

<script>
export default {
  methods: {
    postMsg() {
      this.$refs.monitor.contentWindow.postMessage({name: '我是'}, '*')
    }
  }
}
</script>


// 子组件 （app.vue）
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'APP',
  methods: {
    receiveMsg(event) {
      console.log('msg', event)
    }
  },
  mounted() {
    window.addEventListener('message', this.receiveMsg, false)
  }
}
</script>

子组件中的打印值如下：

执行了两次，有点疑惑，是传值的时机有问题还是接受的时机有问题呢？

Answer 1

第二个显然不是你发的，postmessage可以传入域参数来判断是不是自己发的数据，你不做检测，如果你引入的js也postmessage呢？

Answer 2

不太明白，为何会想到iframe来嵌套，配置多入口应该也是可以的吧

Answer 3

第二个打印的是webpack的事件
在做postmessage通信的时候一定不要把内容放在data一层
写个type判断是不是自己发起的通信 再执行逻辑