在Vue 3中，您可以使用<iframe>标签来引入本地HTML页面，并通过window.postMessage实现跨文档消息传递（cross-document messaging）来实现数据交互。
以下是一个简单的例子：
- 父组件（Parent.vue）：
<template>
<div>
<iframe ref="iframe" :src="iframeUrl"></iframe>
<button @click="sendMessageToIframe">向iframe发送消息</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const iframeUrl = 'local-page.html'; // 本地HTML页面的URL
const iframe = ref(null);
const sendMessageToIframe = () => {
iframe.value.contentWindow.postMessage({ message: 'Hello from Vue 3!' }, '*');
};
// 监听iframe中页面发送的消息
window.addEventListener('message', (event) => {
console.log('从iframe接收的消息:', event.data);
});
</script>- 本地HTML页面（local-page.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Page</title>
<script>
window.addEventListener('message', (event) => {
console.log('从父页面接收的消息:', event.data);
// 回复消息
event.source.postMessage({ message: 'Hello back from local page!' }, event.origin);
});
</script>
</head>
<body>
<h1>Local HTML Page</h1>
</body>
</html>在这个例子中，父组件中的<iframe>标签引入了本地的HTML页面。父组件通过sendMessageToIframe函数向iframe中的页面发送消息。iframe中的页面监听到消息后，会在控制台输出消息内容，并回复一条新的消息。父组件同样监听来自iframe的消息。
请确保本地HTML页面与父Vue应用在同一域下，或者是允许跨域通信的。在实际应用中，您可能需要处理跨域问题，这通常涉及到设置正确的Content-Security-Policy头部或在<iframe>中使用sandbox属性。