vue3、原生html交互传值

1、引入原生html

将该文件放到public目录下，在vue项目里面使用iframe 引入该文件，监听load事件(load事件在<iframe>的内容完全加载完成之后触发)

  <iframe@load="onIframeLoad"style="width: 454px; height: 480px"src="../../../public/Sample/test.html"frameborder="0"></iframe>

2、html文件操作完成后，通过postMessage向.vue文件传递信息

//html文件的保存事件
function submitEvent()
{close();//id的值，根据自己需要获取window.parent.postMessage({ action: 'close', id: '01234564789'}, '*');
}

3、在vue文件里面，文件加载完成后，添加对‘message’事件的监听,监听完成后，进行相应的操作

const onIframeLoad = () => {window.addEventListener("message", handleMessage);
};

const handleMessage = (event) => {if (event.data.action == "close") {console.log(event.data.id)}
};

4、移除事件监听器 

onUnmounted(() => {// 组件销毁前移除事件监听器window.removeEventListener("message", handleMessage);
});