Javascript 父vue组件如何侦听作为HTML页面的iframe事件？_Javascript_Vue.js_Vuetify.js

Javascript 父vue组件如何侦听作为HTML页面的iframe事件？

javascript vue.js

Javascript 父vue组件如何侦听作为HTML页面的iframe事件？,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我已经创建了一个存储iframe的组件 <template> <iframe height=1000 width=100% :src="full" @myEvent="thisMethod" ></iframe> </template> <script> export default { data() { return { path: '../

我已经创建了一个存储iframe的组件

<template>

<iframe height=1000 width=100% :src="full" @myEvent="thisMethod" ></iframe>

</template>

<script>
export default {
    data() {
        return {
            path: '../lib/pdfjs-2.7.570-dist/web/viewer.html',
            name:'../t1.pdf',
            full: '../lib/pdfjs-2.7.570-dist/web/viewer.html?file=pdfs/t1.pdf'
        };
    },
  props: {
    fileName: String,
    path:String
  },

  methods:{
    thisMethod(){
        console.log("Hello from Parent")
    }
  }
}
</script>
<style scoped>
div {
  width: 50%;
  height: 79vh;
  min-width: 400px;
}
</style>


导出默认值{
数据（）{
返回{
路径：“../lib/pdfjs-2.7.570-dist/web/viewer.html”，
名称：'../t1.pdf'，
全文：“../lib/pdfjs-2.7.570-dist/web/viewer.html？file=pdfs/t1.pdf”
};
},
道具：{
文件名：String，
路径：字符串
},
方法：{
此方法（）{
log（“来自家长的你好”）
}
}
}
div{
宽度：50%；
高度：79vh；
最小宽度：400px；
}

在my viewer.html中，我想向我的父级触发一个事件，以便调用“thisMethod”。我试过做：

<html>
 A lot of HTML tags
</html>
<script>
      function myfunction(data){
         this.$emit('myEvent',data)
      }
</script>


很多HTML标签
函数myfunction（数据）{
此.$emit（'myEvent'，数据）
}

但查看器是一个html页面，我似乎找不到将事件从.html文件发送到.Vue文件的方法。

我的问题基本上是什么样的解决方案才能在.vue父页面内的HTML页面中处理JavaScript事件？

您需要在HTML文件中创建事件侦听器，并使用postMessage API向父页面发送消息将实例放入window

mounted（）{window.c_1=this}

然后在iframe中，您可以执行

parent.c_1.thisMethod（）

（显然只有在其来源相同的情况下才能执行）@LawrenceCherone您是我的英雄，非常感谢！！