vue3 使用 postMessage
时间: 2024-01-05 21:17:21 浏览: 366
详解vue中axios的使用与封装
好的,关于 Vue3 使用 postMessage,你可以在 Vue3 的官方文档中找到相关的介绍。Vue3 中可以使用 `provide` 和 `inject` 来实现组件之间的通信,也可以使用 `ref` 和 `reactive` 来实现响应式数据的传递。如果需要在不同的窗口或 iframe 之间进行通信,可以使用 postMessage API。
具体实现方法如下:
1. 在发送消息的窗口中,使用 `window.postMessage()` 方法发送消息,例如:
```javascript
window.postMessage({ message: 'hello' }, '*');
```
其中第一个参数是要发送的消息,可以是任何类型的数据,第二个参数是接收消息的窗口的 origin,如果不知道可以使用通配符 `*`。
2. 在接收消息的窗口中,监听 `message` 事件,例如:
```javascript
window.addEventListener('message', (event) => {
console.log(event.data); // 输出 { message: 'hello' }
});
```
其中 `event.data` 就是接收到的消息。
阅读全文