반응형
VueJs Vue.component에서 데이터를 가져오는 방법
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
}
}
}
}
});
언급URL : https://stackoverflow.com/questions/43677645/vuejs-how-to-get-data-from-vue-component
반응형
'programing' 카테고리의 다른 글
| 템플릿에서 작업하지만 계산된 속성에서 작업하지 않는 혼합 (0) | 2022.07.27 |
|---|---|
| c에서 nan과 inf를 어떻게 사용하는가? (0) | 2022.07.26 |
| 함수를 사용하여 포인터에 포함된 주소 변경 (0) | 2022.07.26 |
| Java에서 무한대를 구현하는 방법2 (0) | 2022.07.26 |
| Vuetify 데이터 테이블에서 Vuex 상태를 올바르게 업데이트하려면 어떻게 해야 합니까? (0) | 2022.07.26 |