[Vue.js] emit 으로 하위 컴포넌트에서 상위로 데이터 보내기

jihye_son·2022년 5월 11일
0

Vue.js

목록 보기
7/24
하위컴포넌트
 <input
        type="text"
        class="mm"
        value="0"
        style="border:0 solid black; width:100%"
        @blur="message()"
      />
      
      .
      .
      .

methods: {
    message() {
      const value = document.querySelectorAll('.mm');
      this.nums = [];
      this.sum = 0;
      for (var i = 0; i < value.length; i++) {
        //console.log(value[i].value);
        this.nums.push(value[i].value);
        console.log('숫자들', this.nums);
      }
      this.nums.forEach((item) => {
        this.sum += parseInt(item);
      });
      console.log('합계', this.sum);
      this.$emit('message', this.sum);
    },
  },

message 라는 메소드에서 this.sum을 보낸다.

상위 컴포넌트 
 <newTable
                v-for="item in items"
                :key="item.id"
                @message="updateSum"
              />
              .
              .
              .
             받아온 message 메소드가 updateSum이라는 메소드를 실행시킨다.
             
            methods: {
  
    updateSum(e) {
      this.showsum = 0;
      this.showsum = e;
      console.log('showsum', this.showsum);
    },
    }
             
             매개변수 e 로 this.sum을 받아온다.
profile
뽀짝뽀짝 나는야 FE 개발자

0개의 댓글