iframe 父子之间的传值

1.父给子传值：经过一个点击事件，给子页面传值，显示不同的模型

父页面代码：

<iframe :src='iframeShowUrl.showURL' :height="iframeShowUrl.domHeight" id="iframe_container" width="100%"/>

事件：

onclick(row, column, event){
        var iframe = document.getElementById('iframe_container');
        var json = {
            type:1,
            num:parseInt(row.num),
        };
        iframe.contentWindow.postMessage(JSON.stringify(json),'*');
},

子页面代码：

window.addEventListener('message', function (e) {
        var data = JSON.parse(e.data);//转化为json
        type= parseInt(data.type)
        num = parseInt(data.num）
        //防止异常
        try {
            if (type== 1) {
                if(num == 0){  自己业务......
                }else{   自己业务......
                }      
            }else if(type== 2){
                if(num == 0){ 自己业务......
                }else{ 自己业务......
                }   
            }
        }
        catch (err) {
        }
    }, false);

2，子页面给父页面传值：经过点击事件传值

子页面代码：

function NameSendTest(SensorName) {
        var json = {
            func_type :"moni_draw"
            data:SensorName
        }
     window.parent.postMessage（JS0N.stringify(json),'*'）;
    }

父页面代码：需要监听

mounted() {
     window.addEventListener("message",this.onMessagessss);
}，

methods:{
      this.onMessagessss(e){
            var data = JSON.parse(e.data);//转化为json
            console.log(data )
            做自己业务....
      }  
}

点击F12，可以看到输出的值如下