【Vue2项目使用iframe嵌入子页面，传值】

父向子传值

父页面

<template>
  <div class="hello">
    <h1>父页面</h1>
    <h2>{{region}} {{index}}</h2>
    <iframe src="http://localhost:8081/" id="myIframe" ref="myIframe" width="80%" height="300px"></iframe>
  </div>
</template>

<script>
export default {
  name: 'parent',
  data(){
    return {
      region:"地区",
      index:1,
    }
  },
  watch:{},
  mounted(){
    document.getElementById("myIframe").onload=()=>{
      this.postMessageFn();
    }
    setInterval(()=>{
      this.index++;
      this.postMessageFn();
    },3000)
  },
  methods:{
    postMessageFn(){
      let myIframe = document.getElementById("myIframe").contentWindow;
      myIframe.postMessage({ 
        state:"gue-ok",
        params:{
          region:this.region,
          index:this.index,
        },
      }, '*');
    }
  },
}
</script>

子页面

<template>
  <div class="hello">
    <h1>子页面</h1>
    <h1>**{{ params }}</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data(){
    return {
      params:{},
    }
  },
  mounted(){
    window.addEventListener("message",(event)=>{
      // 获取传递的数据
      let data = event.data;
      // 处理数据
      console.log('接收到的数据:', data);
      if(data.state == "gue-ok") {
        this.params = data.params;
      }
    })
  },
  beforeDestroy(){
    window.removeEventListener("message");
  },
}
</script>