지난번에 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 Props에 대해서 알아보았다.

• [Vue] Props : 컴포넌트간에 데이터 전달하기(chart.js 예시)

이번에 새로운 프로젝트를 진행하면서 반대로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내야 하는 상황이 생겼는데 이때 사용하는 emit에 대해서 알아보려 한다.

Emit

Vue에서는 컴포넌트에서 데이터를 전달하는 방향이 크게 두가지이다. 부모 컴포넌트에서 자식 컴포넌트로, 자식 컴포넌트로 부모 컴포넌트로.

부모 컴포넌트와 자식 컴포넌트?
프론트엔드 작업을 할 때, 코드의 효율성을 위해 자주 사용되는 요소는 '컴포넌트'화 시켜서 필요할 때마다 불러와 사용하게 된다. 따라서 컴포넌트 안에 컴포넌트를 불러오게 되는 상황이 생긴다.

이때 다른 컴포넌트를 감싸안는 더 큰 컴포넌트를 부모 컴포넌트라고 하고, 부모 컴포넌트에 종속되는 컴포넌트를 자식 컴포넌트라고 부른다.

다른 말로 각각 상위 컴포넌트, 하위 컴포넌트라고 부르기도 한다.

emit event를 이용해 데이터 전달하기

emit은 props와 달리 메소드를 활용해 데이터를 전달하게 된다.

input에 데이터를 받아 이를 부모 컴포넌트로 전달해보자.

<!-- ChildComponent.vue -->
<template>
  <div>
    <input type="text" v-model="contents"/>
    <button @click="sendContents">클릭</button>
  </div>
</template>
<script>

export default {
  name: 'ChildComponent',
  components: {},
  data() {
    return {
      contents:''
    }
  },
  methods: {
    sendContents() {
      // contents 라는 데이터를 contentsData 라는 이름으로 보냄
      this.$emit('contentsData', this.contents)
    },
  }
}
</script>

input 창에 데이터를 입력하면 contents 라는 데이터에 담기게 되고
클릭 버튼을 누르면 contents 데이터를 contentsData 라는 이름으로 보내는 emit 이벤트가 실행된다.

데이터 받아오기

이제 부모 컴포넌트에서 이 데이터를 받아 활용하면 된다.
부모 컴포넌트에서는 자식 컴포넌트의 값을 메소드를 통해 받는다.

<!-- ParentComponent.vue -->
<template>
  <div>
    <span>{{newContents}}</span>
    <!-- contentsEvents 라는 메소드를 이용해서 데이터를 받아올거임 -->
    <ChildComponent
    @contentsData="contentsEvent"/>
  </div>
</template>
<script>
import ChildComponent from '../ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {ChildComponent},
  data() {
    return {
      newContents: ''
    }
  },
  methods: {
    contentsEvents(data) {
      // 자식 컴포넌트에서 받아온 data를 newContents 라는 데이터에 담음
      this.newContents = data
    },
  }
}
</script>

이렇게 하면 자식 컴포넌트에서 받아온 값을 부모 컴포넌트에서 사용할 수 있게 된다.

순서를 정리해보자면
1. (자식 컴포넌트) 입력받은 데이터를 emit 이벤트를 통해 부모컴포넌트로 보내기
2. (부모 컴포넌트) 자식 컴포넌트에서 받아온 데이터를 연결시키는 메소드 만들기
3. (부모 컴포넌트) 자식 컴포넌트 태그에서 이벤트를 연결
4. (부모 컴포넌트) 받아온 데이터 가공 및 사용