iframe页面方法调用时调用父级页面的方法

1.我做了个打印页面的组件，引用的html文件，需要在打印页面的点击打印时调接口，所以需要将方法再次传回给上级。

父级页面使用监听

在mounted和beforeDestroy也就是页面渲染后和页面销毁前增加监听事件的创建与销毁

<template>
  <div>
    <a-modal
      v-model="visible"
      centered
      title="打印预览"
      width="90%"
      :maskClosable="false"
      :footer="false"
      :confirm-loading="loading"
      @cancel="cancel">
      <iframe
        v-if="visible"
        src="/print.html"
        width="100%"
        :height="scrollY + 'px'"></iframe>
    </a-modal>
  </div>
</template>
  <script>
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        printData: null,
        printJson: null,
        scrollY: 0,
        channel: null
      }
    },
    created() {
      this.channel = new BroadcastChannel('zhht_print_channel')
      this.scrollY = document.documentElement.clientHeight - 140
    },
    methods: {
      com() {
        this.channel.postMessage({
          printData: this.printData,
          printJson: this.printJson
        })
      },
      ok() {},
      cancel() {
        sessionStorage.removeItem('nowPrintTemplate')
        this.visible = false
      },
      handleMessage(event) {  
        if (event.data.action === 'printCount') {
          this.$emit('printCountAdd', this.printData)
        }  
      }  
    },
    mounted() {  
      window.addEventListener('message', this.handleMessage) // 添加事件监听  
    },  
    beforeDestroy() {  
      window.removeEventListener('message', this.handleMessage) // 组件销毁前移除事件监听  
    }  
  }
  </script>
  <style scoped></style>
  

在引用的页面调用方法时使用

window.parent.postMessage({ action: 'printCount' }, '*')