VUE+内置iframe传值失效问题解决

起因：

        公司业务需要计算建筑物截收面积，然后我采用的是openCV来计算，在vue内部引用不了，然后就采用了iframe原生html来完成；功能实现了我想让iframe和vue通信；然后用原有方式试了多次都失败了，iframe传值可以但是拿取vue父级传递的数据总是undefined；

解决：

        猜想可能是iframe加载的问题所以我采用了以下方式去传递：

 //通过.contentWindow.postMessage(data,"*")向iframe子组件传值
    let iframe = document.getElementById("iframeComplex");
    iframe.onload = () => {
      setTimeout(() => {
        console.log(this);
        let that = this;
        iframe.contentWindow.postMessage(
          {
            cmd: "getBuildForm",
            params: {
              data: that.data,
            },
          },
          "*"
        );
      }, 10);
    }

然后iframe：

 // iframe获取Vue传递过来的信息
        window.addEventListener("message", getVueMsg);
        function getVueMsg(event) {
            const res = event.data;
            if (res.cmd == 'getBuildForm') {
                if (res.params.data.properties.length > 0) {
                  
                    setTimeout(() => {
                        createModel();
                    }, 100)
                }
            }
        };

解决。