react中使用iframe嵌入vue2页面

react中使用iframe嵌入vue2页面

需求：react 项目父组件传递给vue2项目子组件uuid，子组件利用uuid进行数据请求

react父组件

export default function FormEditProcess() {
       const [uuid, setUuid] = useState("")//定义uuid
        useEffect(() => {
	      const id = document.getElementById('loadIframe');//在iframe上定义的id
	        // 触发子页面的监听事件
	        id.addEventListener('load', () => {
	            //向子组件传递uuid
	            id.contentWindow.postMessage({
	                type: 'uuid', uuid, // type: 'uuid'定义类型
	            }, '*')
	        })
	        //子组件传过来的值
	        window.addEventListener("message", (e) => {
	            // 子组件信息
	            console.log(e.data);
	        });
    }, [uuid])
    return(
         <div className="processBoxs">
                       <iframe
                        height={"100%"}
                        id='loadIframe'                 
                        style={{
                            border: 0, width: "100%"
                        }}
                        scrolling="yes"
                    >
                    </iframe>
                </div>
          )
    }

vue2子组件

  mounted() {
    //接受父组件传来值
    window.addEventListener("message", (e) => {
        //数据在e.data中
        console.log(e.data);
        // 给父组件发送的数据
    });
   //向父组件传递子组件的数据为this.data
     window.parent.postMessage(this.data, "*");
  },