vue3 iframe标签进行穿透传参

做了一个嵌套系统项目，父系统需要嵌套多个子项目展示，子项目没有登录，只有父才有登录，这时候就需要iframe信息透传功能

iframe父页面

<template>
  <div>
    <iframe ref="myIframe" src="http://192.168.0.173:8080/tum4/" frameborder="0" width="100%"  ></iframe>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
export default {
  name: 'authority_index',
  components: {
  },
  setup () {
   
    onMounted(() => {
      // 父  进行传递信息----
      data.iframeFN()
      // 父  进行接收信息----
      data.iframeMessage()
    })

    const data = reactive({
      myIframe: null,
      // 传递信息--------------------------------------------
      iframeFN () {
        const iframe = data.myIframe
        const contentWindow = iframe.contentWindow
        const iframeViewer = iframe
        const _obj = {
          name: '父页面传递的数据',
          token: 'ad450dd8-8b45-41ba-8381-fc3cdd2213b8'
        }
        iframeViewer.onload = () => {
          contentWindow.postMessage(JSON.stringify(_obj), '*')
        }
      },
      // 获取信息--------------------------------------------
      iframeMessage () {
        window.addEventListener('message', (res) => {
          console.log('获取子传递', res)
        })
      }
    })

    return {
      ...toRefs(data)
    }
  }

}

</script>

<style scoped>

</style>

iframe内部子页面

<script>
export default {
	setup() {
    const data = reactive({

      // 接收父传递信息   ----------
       messageEvent () {
        window.addEventListener('message', function (messageEvent) {
          const data = messageEvent.data
          console.log('ifrem外部传递', data)
        }, false)
      },

      // 子向父传递信息   ----------
      postMessage () {
        window.parent.postMessage('hello，我即将传给父项目', '*')
      }
    })

    // 子接收父传递信息
  	data.messageEvent() ---------------------------

     // 子向父传递信息
    data.postMessage() -----------------------

    return {
      ...toRefs(data)
    }
  }
}
   

</script>

效果