programing

VueJs Vue.component에서 데이터를 가져오는 방법

prostudy 2022. 7. 26. 22:19
반응형

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

반응형