iframe传值vue

以下是两种iframe传值给Vue的方法：

1. 在Vue中给iframe传值

<!-- Vue模板 -->
<template>
  <div>
    <button @click="fatherpost">给iframe传值</button>
    <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    // 挂载在mounted中
    this.iframeWin = this.$refs.iframe.contentWindow;
  },
  methods: {
    fatherpost(e) {
      // 点击给iframe传值
      this.iframeWin.postMessage("我是来自父页面的data", '*');
    },
  },
};
</script>

2. 在iframe中给Vue传值

<!-- iframe模板 -->
<template>
  <div>
    <button @click="sonpost">向父亲传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    sonpost() {
      window.parent.postMessage("我是子页面的test！", '*');
    },
  },
};
</script>

注意：在Vue项目中接收消息的代码应该写在Vue实例的生命周期函数中，例如mounted()或created()。