js如何实现两个iframe之间传值

js如何实现两个iframe之间传值，下面web建站小编给大家详细介绍一下具体实现代码！

父组件传参

<template>
  <view>
    <iframe :src="`/demoA?$[params]`"></iframe>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        params: ''
      };
    },
    mounted() {
      const params = {
        name: 'web建站',
        age: '3',
      }
      this.params = encodeURIComponent(JSON.stringify(params))
      window.addEventListener('message', this.handleMessage)
    },
    methods: {
      handleMessage(event) {
        console.log(event, '事件') 
        if(event.data.status === 'ok') {
          console.log(event.data.params, '参数值')
        }
      }
    }
  }
</script>

子组件接收参数

<template>
  <view>
    <p>demoA发来的参数：{{params}}</p>
    <button @click="sendMess">发送数据</button>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        params: ''
      };
    },
    created() {
      const params = JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))
      this.params = params
    },
    methods: {
      sendMess() {
        window.parent.postMessage({
          status: 'ok',
          params: {
            id: 12
          }
        }, '*');
      }
    }
  }
</script>