vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互

记录一下新项目集成老项目过程中产生的问题，需要 vue 项目实现引用 HTML，并且实现 vue 页面可以传递数据到 HTML 页面，HTML 页面也可以反向传递数据给 vue 页面

1、父页面（vue）传给子页面（html）

vue 代码：

//html 部分


//js 部分
sendMessage(){
      // 获取自己的后端数据
      var Fdata = ''const iframe = document.getElementById('myIframe');
      iframe.contentWindow.postMessage(Fdata, '*');
      
    },

html 代码：

 window.onload = function () {
            // 接收父页面传参
            window.addEventListener('message', (event) => {if (event.data.type === 'init') {  // 初始化数据
                    // 接收到来自 iframe 的消息
                    console.log(event.data,9090909)
                }
                if (event.data.type === 'pointValue') {  // 点表数据
                    // 接收到来自 iframe 的消息  
                    console.log(event.data.value,666)
                }
            });
        };

2、子页面（html）传给父页面（vue）

父页面代码：

mounted() {
    // 获取子页面传输数据
    window.addEventListener('message', this.receiveChild);
  },
methods: {
    
    // 接收子页面数据
    receiveChild(e){if(e.data.type == "jsonData"){//
        console.log(e.data.jsonData,777,'接收到了数据')
      }
    },
  },

子页面代码：

//html 部分
 测试给父组件发布数据 


//js 部分
// 测试给父组件发布数据
      document.getElementById("left_test").addEventListener("click", function (event) {
                let data = {
                        jsonData: '测试 json 数据',
                        type:'jsonData'
                    }
                    // 传参
                    window.parent.postMessage(data, '*')
                });