vue和iframe页面的相互传参

父组件

父组件用的vue2

<template>
  <div>
    <iframe src="http://192.168.9.94:3000" ref="iframe" ></iframe>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
    window.addEventListener('message', this.handleMessage) // 监听iframe的事件
  },
  methods: {
    handleMessage (event) {
      console.log('handleMessage', event)
      if (event.data === 'getParams') {
        this.sendMessage()
      }
    },
    sendMessage () {
      this.$refs.iframe.contentWindow.postMessage({
        cmd: 'getParams', // cmd 用来判断触发的是什么事件
        params: {
          token: localStorage.getItem('authData')
        }
      }, '*')
    }
  }
}
</script>

子iframe

子组件用的vue3

onMounted(() => {
  // 初始化
  console.log('初始化向父组件要参')
  parent.window.postMessage("getParams", '*');

  // 接受父页面发来的信息
  window.addEventListener('message', (event) => {
    // console.log(event)
    let data = event.data
    console.log(data)
    switch (data.cmd) {
      case 'getParams':
        console.log('public data', data)
        break
    }
  })
})