vue中通过postMessage传值，通过window.opener双向通信

在Vue中，可以使用postMessage进行跨文档（跨窗口）消息传递，以及使用window.opener来与父窗口或打开当前窗口的窗口进行双向通信。以下是一个简单的示例，展示了如何在Vue应用中使用这两种方式。

1. 使用postMessage进行跨窗口通信的示例：

父窗口（Parent.vue）:

<template>
  <div>
    <button @click="openChildWindow">打开子窗口</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    openChildWindow() {
      const childWindow = window.open('', '_blank');
      childWindow.document.write(`<h1>子窗口</h1>`);
      childWindow.onload = () => {
        childWindow.postMessage('Hello from parent', '*');
      };
    }
  }
};
</script>

子窗口（Child.vue，在新窗口中运行）:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    window.addEventListener('message', (event) => {
      if (event.origin === window.origin) {
        this.message = event.data;
      }
    });
  }
};
</script>

2. 使用window.opener进行双向通信的示例：

父窗口（Parent.vue）:

<template>
  <div>
    <button @click="openChildWindow">打开子窗口</button>
    <p>{{ messageFromChild }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      messageFromChild: ''
    };
  },
  methods: {
    openChildWindow() {
      const childWindow = window.open('/child', '_blank');
    },
    receiveMessage(event) {
      this.messageFromChild = event.data;
    }
  },
  mounted() {
    if (window.opener) {
      window.opener.postMessage('Hello from child', '*');
      window.addEventListener('message', this.receiveMessage);
    }
  },
  beforeDestroy() {
    window.removeEventListener('message', this.receiveMessage);
  }
};
</script>

子窗口（Child.vue，在新窗口中运行）:

<template>
  <div>
    <button @click="sendMessageToParent">向父窗口发送消息</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    sendMessageToParent() {
      if (window.opener) {
        window.opener.postMessage('Hello from child', '*');
      }
    }
  }
};
</script>

在这两个示例中，父窗口和子窗口通过postMessage进行跨文档通信，而window.opener用于父窗口向子窗口发送消息，子窗口可以通过window.opener与父窗口进行双向通信。注意，在实际应用中，你应该使用具体的URL替换window.open中的空字符串，并且在postMessage中指定准确的消息来源以保证安全性。