value is undefined when passed from child emit in vue.js

Question

I'm not sure why this is happening as both my methods (both parent and child are being called) but the actual data isn't being passed, even when I try to pass a simple string the data is 'undefined' when logged from my parent that receives the data from emit:(

can someone help me out or maybe provide an explanation?

my app is rendered like so in the dom (this is all a part of an html injection not vue-cli)

<div id="app">
    <div>
      <b-button v-b-modal.modal-1>upload files</b-button>

      <b-modal id="modal-1" title="BootstrapVue" ok-title="upload">
          <div>
              <file-uploader v-on:child-to-parent="logChildData()"></file-uploader>
          </div>
      </b-modal>
    </div>
  </div> 

here's my child component

//component constructor
var fileUploader = Vue.extend({
  template: ' <div><div id="container" class="flexContainer"><div v-for="img in images" :key="img.name"><div :id=img.name><img height="80px" width="80px" :src=img.src alt="uploaded image"><button @click="removeItem(img.name)">X</button></div></div></div><input type="file" multiple @input="handleUpload($event)"></div>',
  data() {
      return {
        images:[],
        pdfs:[], 
      }
    },

    methods: {

      //send files back up to parent component where they can be manipulated
        sendDatatoParent(){
          console.log('sending data to parent')
          this.$emit('child-to-parent', 'a string to send')
        },


      async handleUpload(e) {

          //check file type and sort into pdfs or images based on their file extension 
          var files = e.target.files
          for(i = 0; i< files.length; i++){

            if(files[i].type === 'application/pdf'){ 
              this.pdfs.push(files[i])

            }else{
              if(files[i].type === 'image/jpeg' || files[i].type === 'image/png' || files[i].type === 'image/gif' || files[i].type === 'image/jpg'){

                //create the thumbnail img and add it to the image object
                //console.log(files[i].name)
                this.buildUrl(files[i])
              }
            }
          }
          //console.log('pdfs',this.pdfs)
          //console.log('images',this.images)

          this.sendDatatoParent()  
        },

    },    
})

// register the file uploader component inside your app so your app has a name to reference the component by
Vue.component('file-uploader', fileUploader)

here is my parent where I should be able to log the data from $emit

// create the main vue app (this contains and renders all your components, it is the parent)
new Vue({
  el: '#app',
  methods:{  

    /*
       listens for the custom $emit event (childToParent) which is passed to your child component (see above ^)
       when fired it will grab the child's data and pass the value here (the parent component)
    */
    logChildData(value){
      console.log('logging the value from emit',value)
    }

  }
})

Answer 1

In your child component tag in parent, you are calling the parent function with no parameter, so the value will not be there. Either pass $event or remove the parenthesis altogether (recommended). So do:

v-on:child-to-parent="logChildData"

or alternatively:

v-on:child-to-parent="logChildData($event)"