在Vue中，可以使用postMessage进行跨文档（跨窗口）消息传递，以及使用window.opener来与父窗口或打开当前窗口的窗口进行双向通信。以下是一个简单的示例，展示了如何在Vue应用中使用这两种方式。
- 使用
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>
- 使用
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中指定准确的消息来源以保证安全性。