vue中使用iframe并进行父子通信

业务需求：一个组件，可以独立运行，也可以支持嵌套在其他(项目)页面，并与父页面进行通信

实现方案：子组件以iframe的方式嵌入父页面，通过事件监听的方式实现父子通信

效果：

代码：

父页面：

<template>
  <div>
    <h3>父级页面</h3>
    <p>子组件传过来的参数b: {{ b }}</p>
    <div><button @click="changeChild">点击改变子组件参数</button></div>
    <iframe 
      ref="child"
      src="http://localhost:8080/iframe" 
      width="1000" 
      height="500" 
      scrolling="no"
      frameborder='0'>
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      b: ''
    }
  },
  mounted() {
    window.addEventListener('message', (ev) => {
      const data = ev.data.b || null;
      this.changeB(data);
      }, false);
  },
  methods: {
    changeB(n) {
      this.b = b;
    },
    changeChild() {
      this.$refs.child.contentWindow.postMessage({ a: '宝塔镇河妖'}, '*');
    }
  }
}
</script>

子页面：

<template>
  <div>
    <h3>嵌套子页面</h3>
    <button @click="changeParent">点击改变父页面状态</button>
    <p>父组件传递过来的参数a：{{a}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: ''
    }
  },
  mounted() {
    window.addEventListener('message', (ev) => {
      this.a = ev.data.a || null;
      }, false);
  },
  methods: {
    changeParent() {
      window.parent.postMessage({b: '天王盖地虎'}, '*');
    }
  }
}
</script>