iframe怎么将参数传递给vue 父组件

在子页面的iframe中想将参数传递给Vue父组件，可以使用postMessage()方法将数据发送给父窗口。父组件可以通过监听message事件来接收并处理这些数据。

将参数从子页面的iframe传递给Vue父组件：

在子页面的iframe中：

// 发送消息给父窗口
const data = {
  imgUrl: '...',
  otherParam: '...'
};
window.parent.postMessage(data, '*');

在Vue父组件中：

mounted() {
  // 监听message事件
  window.addEventListener('message', this.handleMessage);
},
beforeDestroy() {
  // 在组件销毁前移除事件监听器
  window.removeEventListener('message', this.handleMessage);
},
methods: {
  handleMessage(event) {
    // 确保消息来自预期的源
    // 如果需要更严格的安全性，请验证event.origin
    if (event.source !== window.parent) {
      return;
    }

    // 处理接收到的消息数据
    const data = event.data;
    const imgUrl = data.imgUrl;
    const otherParam = data.otherParam;

    // 在Vue父组件中处理数据
    // ...
  }
}

在Vue父组件中，通过在mounted()钩子中监听message事件，可以获取子页面iframe发送的消息。使用handleMessage方法来处理接收到的数据。在这个方法中，可以访问event.data对象，其中包含从子页面传递过来的参数。

在Vue父组件销毁之前，需要使用beforeDestroy()钩子将事件监听器从message事件中移除，以避免潜在的内存泄漏或错误。

在接收到从iframe发送的参数后执行某些特定的逻辑，可以在handleMessage方法中添加相应的判断语句。使用条件语句（如if语句）来检查接收到的参数，并根据不同的条件执行不同的操作。

以下是一个示例，在handleMessage方法中添加判断逻辑：

handleMessage(event) {
  const data = event.data;
  
  // 检查接收到的参数
  if (data && data.imgUrl && data.otherParam) {
    // 参数完整，执行特定的操作
    console.log('打印子页面经纬度 iframe:', data);
    
    // 进一步处理参数
    // ...
  } else {
    // 参数不完整，忽略或执行其他操作
    console.log('接收到的参数不完整');
  }
}

这里使用条件语句检查接收到的参数data是否存在，并且是否具有imgUrl和otherParam属性。如果参数完整，可以打印参数的值并可以执行特定的操作。否则，如果参数不完整，就忽略它或执行其他适当的操作。

iframe接收vue界面传的值

在iframe中，使用window.addEventListener监听message事件，然后在事件处理程序中获取传递的数据：

<!-- iframe.html -->
<script>
// 监听来自父页面的消息
window.addEventListener('message', function(event) {
  const data = event.data;
  // 在这里处理接收到的消息
  console.log('Received message from parent:', data);
});
</script>

父页面使用postMessage方法向iframe发送消息。postMessage方法接收两个参数：要发送的数据和目标窗口的origin（使用通配符'*'表示可以从任何来源接收消息）。

iframe中使用window.addEventListener监听message事件，并在事件处理程序中获取传递的数据

这里需要注意一下，使用'*'作为目标窗口的origin存在安全风险。建议在实际使用中，指定确切的origin，以防止来自不受信任的来源的消息。