vue项目中使用postMessage

父级页面 http://localhost:8080/parentPage

<template>
    <div class="container">
      <div id="message"></div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      postData: {
        name: 'professionalDatum',
        key: '567890'
      }
    }
  },
  mounted () {
    window.onload = () => {
      // 父级页面发送消息
      document.getElementById('child').contentWindow.postMessage(this.postData, '*')
      console.log('send')
      // 父级页面接收消息
      window.addEventListener('message', function (e) {
        if (e.data.key === '123456') {
          window.document.getElementById('message').innerHTML = e.data.msg
        }
      }, false)
    }
  },
}
</script>

子页面 http://localhost:8081/subPage

<template>
  <div class="container">
    <div id="message"></div>
    <button @click="sendToParent">发送</button>
  </div>
</template>
<script>
export default {
  mounted () {
    window.onload = () => {
      // 子页面接收消息
      window.addEventListener('message', function (e) {
        if (e.data.key === '567890') {
          window.document.getElementById('message').innerHTML = e.data.name
        }
      }, false)
    }
  },
  methods: {
    // 子页面发送消息
    sendToParent () {
      window.parent.postMessage({
        msg: 'hideselfService',
        key: '123456'
      }, '*')
    }
  }
}
</script>