«

postMessage交互传参

---

时间：2023-7-19    作者：网络剑客    分类： other

---

<script>
export default {
  name: 'index',
  data(){
    return {
    }
  },
  mounted() {
    window.addEventListener("message", this.handleMessage)
  },
  methods:{
    // 监听父页面传过来的值的方法  @param {Object} event
    handleMessage (e) {
      let messageEle = document.getElementById("recMessage");
      messageEle.innerHTML = "从" + e.origin + "收到消息： " + JSON.stringify(e.data);
      console.log("子页面收到：", e.data);
    },
    // 向父页面传值的方法   @param {Object} data
    sendMessage(){
      let parentData = {type: 'passDataBack', data: 123};
      window.parent.postMessage(parentData, '*');
    }
  }

}
</script>