前端js 使用vue 一个平台内部使用iframe镶嵌另一个vue平台, vue平台中点击按钮,进行传递参数到镶嵌vue平台中,镶嵌平台并进行post请求,如何实现

在Vue应用中嵌入iframe，并实现在主Vue平台中触发事件向嵌套平台传递参数以及接收其响应，可以按照以下步骤操作：

1. **创建主Vue组件**:
首先，在主Vue组件里，你可以设置一个点击事件，比如`this.$emit('send-data', data)`，这里`data`是你想要传递给iframe的数据。

<template>
  <div>
    <button @click="sendDataToIframe">发送数据</button>
    <iframe :src="iframeSrc" @message="handleMessage"></iframe>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToIframe() {
      // 这里假设你想传的是一个对象
      const data = { key: 'value' };
      this.$emit('send-data', data);
    },
    handleMessage(event) {
      console.log('接收到嵌套平台的消息:', event.data);
    }
  },
  data() {
    return {
      iframeSrc: '' // 初始的iframe地址
    };
  }
};
</script>

2. **配置iframe src**:
在`iframeSrc`中加入一个查询字符串或URL参数，用于后续的POST请求，比如`?action=send&data={{JSON.stringify(data)}}`。

3. **嵌套Vue平台的处理**:
嵌套的Vue应用（可能是跨域的，所以需要CORS支持），监听`message`事件。当接收到消息时，可以解析数据并发起POST请求。

mounted() {
  window.addEventListener('message', (event) => {
    if (event.origin !== window.location.origin) return; // 验证是否来自同一源

    if (event.data.action === 'send') {
      // 发起POST请求
      fetch('/api/receive', {
        method: 'POST',
        body: JSON.stringify(event.data.data), // 将接收到的数据作为POST body
        headers: {
          'Content-Type': 'application/json',
        },
      })
        .then((response) => response.json())
        .then((data) => window.parent.postMessage(data, '*')); // 回应主Vue平台
    }
  });
}