VueJs how to get data from Vue.component

Question

I want to know how to get data from Vue.component and send to this >>var app = new Vue({ })<< this is my code

Vue.component('my-form', {
template: '#my-form',
props:['ddTechtemp'],
     data: function () {
     return {
        isCores: app.testCorres,
        activeClass: 'isCorrespon',
        errorClass: 'isTech',
        tempData : {cell1 : "",
                    cell2 : "",
                    cell3 : "",
                    cell4 : "",
                    cell5 : "",
                    cell6 : ""
        },
    }
},
watch:{
    tempData:{
        handler:function(newVal,oldVal){

            app.ddTechtemp = newVal;

        },
        deep:true,
    }

},
methods:{

}});

I want to get data from above code and send to this code var app = new Vue({ data: Vue.component.data}) Anyone understand me please help.Thank you

Answer 1

In Vue.js parent-child relationship is run by

1) passing props from parent to child

2) emitting custom events from child to parent

So, if you need to pass some data from child to parent - use this.$emit to emit a custom event with your data, and listen for this event in parent component with v-on:myevent or @myevent shorthand. The data you pass with event is found in $event variable.

Example: https://jsfiddle.net/wostex/63t082p2/51/

<div id="app">
  <myform @newdata="handleData($event)"></myform>
  <p>name: {{ user.name }}</p>
  <p>age: {{ user.age }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    user: { name: '', age: 0 }
  },
  methods: {
    handleData: function(e) {
      [this.user.name, this.user.age] = e;
    }
  },
  components: {
    'myform': {
      template: `
      <div>
      <input type="text" v-model="formData.name" placeholder="Your name">
      <input type="number" v-model.number="formData.age">
      </div>`,
      data: function() {
        return { formData: { name: '', age: 0 } }
      },
      watch: {
        formData: {
            handler: function() {
              this.$emit('newdata', [this.formData.name, this.formData.age]);
          },
            deep: true
        }
      }
    }
  }
});