title: How can a parent vue component listen to a iframe event which is a HTML page?
body: <p>I've created a component that stores an iframe</p>
  <pre><code>&lt;template&gt;
  
  &lt;iframe height=1000 width=100% :src=&quot;full&quot; @myEvent=&quot;thisMethod&quot; &gt;&lt;/iframe&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  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(&quot;Hello from Parent&quot;)
      }
    }
  }
  &lt;/script&gt;
  &lt;style scoped&gt;
  div {
    width: 50%;
    height: 79vh;
    min-width: 400px;
  }
  &lt;/style&gt;
  </code></pre>
  <p>Inside my viewer.html I want to fire an Event to my parent so that 'thisMethod' would be called.
  I've tried doing:</p>
  <pre><code>&lt;html&gt;
   A lot of HTML tags
  &lt;/html&gt;
  &lt;script&gt;
        function myfunction(data){
           this.$emit('myEvent',data)
        }
  &lt;/script&gt;
  </code></pre>
  <p>but viewer is a html page and I can't seem to find a way to send an event from a .html file to a .Vue file.
  My question is basically what would be a solution to be able to handle a JavaScript event in a HTML page inside a .vue parent page ?</p>