我想知道如何从Vue.component获取数据并将其发送到
这个>> var app = new Vue({})<<
这是我的代码
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:{
}});
我想从上面的代码中获取数据并发送到此代码
var app = new Vue({ data: Vue.component.data})
有人了解我,请帮忙。谢谢
最佳答案
在Vue.js中,父子关系由
1)将道具从父母传递给孩子
2)从孩子向父母发出自定义事件
因此,如果您需要将某些数据从子级传递给父级,请使用this.$emit
随数据一起发送自定义事件,并使用v-on:myevent
或@myevent
速记在父级组件中侦听此事件。在$event
变量中找到随事件传递的数据。
示例: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
}
}
}
}
});