vue组件和iframe之间的传值-传值总结

前情提要：由于项目需要，我需要引入一个报表的插件。插件只能使用html的方式调用。
所以,我把插件的使用封装了一个html页面,vue项目则利用iframe的方式引入。
在项目进行过程中，需要iframe和vue组件之间的传值。暂时做个笔记。

vue组件传值：

 <el-main>
        <iframe
          id="mainIframe"
          ref="mainIframe"
          name="mainIframe"
          style="height:100%;width:100%;border-width: 0px;"
          src="src/scoreTempleteInfoDelics.html"
          @load="loaded"
        />
      </el-main>

生命周期内传值到iframe：

   const mapFrame = this.$refs["mainIframe"];
   var idObj=1；
      if (mapFrame.attachEvent) {
        // 兼容浏览器判断
        mapFrame.attachEvent("onload", function () {
          const iframeWin = mapFrame.contentWindow;
          iframeWin.postMessage(idObj, "*");
        });
      } else {
        mapFrame.onload = function () {
          const iframeWin = mapFrame.contentWindow;
          iframeWin.postMessage(idObj, "*");
        };
      }

vue组件接受值：

   window.onmessage = (e) => {
        console.log(e.data);
    };

iframe传值到vue 组件：

function sendInfo(val) {
    window.parent.postMessage(val, '*');
}

iframe接收值

window.addEventListener('message', function (messageEvent) {
    var data = messageEvent.data;
    console.log(data)
})