Vue页面向嵌套的iframe中的html页面传值

由于浏览器的安全限制，Vue页面无法直接向嵌套的iframe中的html页面传值。但是可以通过以下方式实现：

1. 使用postMessage

在Vue页面中使用postMessage向iframe发送消息，iframe中的html页面监听message事件，接收消息并进行处理。

Vue页面：

// 发送消息到iframe
const iframeWindow = document.getElementById('iframe').contentWindow;
iframeWindow.postMessage({data: 'hello'}, '*');

// 监听iframe返回的消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://iframe-origin.com') return; // 验证消息来源
  console.log(event.data); // 处理返回的消息
});

iframe页面：

// 监听消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://vue-origin.com') return; // 验证消息来源
  console.log(event.data); // 处理接收到的消息
});

// 发送消息到Vue页面
const parentWindow = window.parent;
parentWindow.postMessage({data: 'world'}, 'http://vue-origin.com');

2. 使用URL参数

在Vue页面中嵌套iframe时，可以在iframe的src属性中添加参数，iframe中的html页面可以通过URL参数获取传递的值。

Vue页面：

<iframe src="http://iframe-origin.com?data=hello"></iframe>

iframe页面：

// 获取URL参数
const urlParams = new URLSearchParams(window.location.search);
const data = urlParams.get('data');
console.log(data); // 处理获取到的值

需要注意的是，使用URL参数传递数据时，需要考虑参数的安全性，避免出现安全漏洞。