(forward) usage of PostMessage

1、 The parent page sends messages to the child page 
let data = {type: 'answerResult', data: jsonData.data};
this.$refs.iframe.contentWindow.postMessage(data, '*');

2、 The child page sends a message to the parent page 
let parentData = {type: 'passDataBack', data: passData};
window.parent.postMessage(parentData, '*');
 
3、 Method of receiving message 
window.addEventListener('message', function (e) {})

encapsulation

//  Parent page 
mounted(){
    window.addEventListener("message", this.handleMessage)
},
methods:{
    /**
     *  towards iframe How to transfer values 
     * @param {Object} data
     */
    sendMessage(data){
        const iframe = this.$refs.iframePage.contentWindow;
        iframe.postMessage(data, '*');
    },
    /**
     *  The method of listening to the value passed from the sub page 
     * @param {Object} event
     */
    handleMessage (event) {
        // dosomething
    }
}

//  Subpage 
mounted(){
    window.addEventListener("message", this.handleMessage)
},
methods:{
    /**
     *  The method of passing values to the parent page 
     * @param {Object} data
     */
    sendMessage(data){
        window.parent.postMessage(data, '*');
    }
    /**
     *  The method of listening to the value passed from the parent page 
     * @param {Object} event
     */
    handleMessage (event) {
        // dosomething
    }
}

link ：https://www.jianshu.com/p/ae840f7d7f8b