PostMessage是HTML5的一項新技術,可以讓不同頁面之間進行跨域通信。在Vue中,我們可以使用postMessage技術來實現組件之間的通信。
首先,我們需要在父組件中添加監聽事件:
window.addEventListener('message', event =>{ if (event.data === 'example') { // 執行操作 } });
然后,在子組件中通過window.parent.postMessage()方法將消息發送給父組件:
window.parent.postMessage('example', '*');
這里的'*'代表了所有消息發送的目標,也可以指定父組件的url作為目標。
在Vue中,我們可以將這個方法封裝成一個全局方法供所有組件使用:
Vue.prototype.$postMessage = function (message) { window.parent.postMessage(message, '*'); };
然后在任何一個子組件中都可以通過this.$postMessage()來發送消息了。