Vue项目中使用Iframe子页面给Vue父级页面传数据（js清除addEventListener监听事件）

Vue 代码

<template><div><a-button &＃64;click&＃61;"handleScan">扫 描</a-button><a-modal v-model:visible&＃61;"visible1" width&＃61;"1200px" title&＃61;"扫描仪" &＃64;ok&＃61;"handleScanOk" &＃64;cancel&＃61;"handleScanOk"><iframe width&＃61;"1100px" height&＃61;"600px" src&＃61;"../static/webScan2.html?token&＃61;" ></iframe></a-modal></div>
</template>
<script>
export default {name: "ScanBtn",data(){return{visible1:false}},methods:{ListenerMessage(){ //获取并监听iframe传递来的数据window.addEventListener(&＃39;message&＃39;,this.messageUpload)},messageUpload(e){ //进行数据的处理console.log(e.data)},handleScan(){ //展开model弹框this.visible1&＃61;true;this.ListenerMessage()},handleScanOk(){//关闭model弹框并且清楚监听事件this.visible1&＃61;false;window.removeEventListener(&＃39;message&＃39;,this.messageUpload)}}}
</script><style scoped></style>


JS 代码

jQuery.ajax({type:&＃39;post&＃39;,url: "****",cache:false,data:{"url":data.image},success:function(data){window.parent.postMessage(data, &＃39;*&＃39;);},error:function(){console.log(new Result(500,"网络错误",null))}})