VueJs how to get data from Vue.component
vuejs2
Solution
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
}
}
}
}
});
Problem
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