掌握使用postMessage传递数据

在不同的项目中，如果有组件交互除了微前端，我们就得使用iframe来嵌套在页面上，交互效果不免出现数据传递，这时候我们使用postMessage是一个不错的方法

子组件：点击给父组件传递数据

<template>
  <div>
    <h1>Child Component</h1>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      const message = 'Hello from child component!';
      window.parent.postMessage(message, '*');
    }
  }
};
</script>

父组件：接收处理来自子组件的数据

<template>
  <div>
    <h1>Parent Component</h1>
    <iframe ref="childIframe" src="child.html"></iframe>
  </div>
</template>
<script>
export default {
  mounted() {
    const childIframe = this.$refs.childIframe;
    childIframe.addEventListener('message', this.receiveMessage);
  },
  beforeDestroy() {
    const childIframe = this.$refs.childIframe;
    childIframe.removeEventListener('message', this.receiveMessage);
  },
  methods: {
    receiveMessage(event) {
      if (event.origin !== window.location.origin) return;
      console.log('Received message from child:', event.data);
      // 处理来自子组件的消息
    }
  }
};
</script>

子组件如果在初始化时用到父组件中的数据，父组件可以使用src携带参数传递，子组件用$route来获取，当父组件数据发生改变iframe可以跟着重新加载

  watch: {
    'global.language.active': function (val) {
      const iframe = document.getElementById('iframe');
      iframe.src = '';
      //使用$nextTick或者setTimeout都行
      setTimeout(() => {
        iframe.src = `https:/xxxxxx.com/xx/xx/xxx?type=${global.search.type}&value=${global.search.value}&iniframe=true&language=${val}`;
      }, 0);
    }
  },