[Vue.js] Emit, v-model로 컴포넌트간 데이터 보내기 (자식 컴포넌트 => 부모 컴포넌트)

Vue.js에서 컴포넌트간 데이터 통신은 Props와 Emit으로 가능하다.

• React.js : 부모=> 자식 컴포넌트 방향으로 Props만 내릴 수 있는 단반향 데이터 흐름
• Vue.js : 부모 => 자식 방향은 Props로 데이터 내리기, 자식 => 부모 방향은 Event Emit으로 데이터 올리기가 가능한 양방향 데이터 흐름

부모 컴포넌트의 데이터를 자식 컴포넌트에서 변경하여 부모 컴포넌트로 다시 올리려면?

• react에선 부모 컴포넌트에 있는 state를 자식 컴포넌트에서 setState만 props로 받으면 쉽게 변경이 가능했습니다.

• Vue.js에선 어떻게 할까요?

• Vue.js에선 emit을 사용해 데이터를 보낼수 있습니다.

  watch: {
    selectedValue: function (newValue, oldValue) {
      this.$emit('input', newValue) // Update component's v-model' value
    }
  },

• 위 코드를 해석 해보면 watch 속성을 이용해서 selectedValue값이 변경 될 때 마다 'input'이라는 이름의 emit을 newValue(새로운 selectedValue의 값) 과 함께 올려보내 줍니다. 이렇게 하면 쉽게 자식 컴포넌트에서 부모 컴포넌트로 데이터가 올라가게 됩니다.

Emit을 이용해서 자식 컴포넌트에서 데이터 받는 방법 2가지

• 부모 컴포넌트에서 Emit을 받아서 사용하는 방법은 2가지가 있습니다.

이벤트 캡쳐 => 메서드를 활용해 데이터 처리

<styled-select v-on:input="setSelelctedValue"></styled-select>
...
watch: {
    selectedValue: function (newValue, oldValue) {
      this.$emit('input', newValue) // Update component's v-model' value
    }
  },

  ...

methods : {
    setSelectedValue: function (value) {
        this.selectedValue = value;
    }
}

• 먼저, 위 코드 처럼 올려보낸 이벤트 네임을 캡쳐해서 set 함수를 실행시켜서 데이터를 처리하는 방법이 있습니다.

2. v-model 사용하기

watch: {
    selectedValue: function (newValue, oldValue) {
      this.$emit('input', newValue) // Update component's v-model' value
    }
  },

 ...

<styled-select  v-model="reportContent"></styled-select>

• 두번째로는 v-model을 사용해 조금 더 간단하게 데이터를 처리하는 방법입니다.
• 위 코드 처럼 v-model을 지정해주면 해당 데이터와 자식 컴포넌트에서 올라오는 emit의 데이터가 자동적으로 바인딩 됩니다.
• 굉장히 간단하게 해결되어 "이게 맞나? 이게 왜 돼지?" 라는 생각을 하게 만든 코드입니다.
• 근데 아무튼 되더라구요. 편하게 사용하도록 vue에서 잘 만들었습니다. 물론 알아야 편하게 쓸 수 있습니다...
• 부지런히 공부해야겠습니다.