[Vue.js] 자식 컴포넌트에서 부모 컴포넌트로 데이터 보내기 - emit

이번 포스트에서는 emit Event를 활용해서 자식 컴포넌트에서 부모 컴포넌트로 데이터 통신하는 방법에 대해서 다뤄보겠습니다.

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 props 간단 정리

• 부모 컴포넌트에서는 props를 활용하여 자식 컴포넌트로 데이터를 보낼 수 있다.
• 즉, 단방향 데이터 바인딩 방식이다.

 

자식 컴포넌트에서 emit Event를 활용하여 부모 컴포넌트로 데이터 보내기

• 프로젝트이름/src/App.vue

<template>
  <Input @msg="consoleMsg" />
</template>

<script>
import Input from './components/Input';

export default {
  name: 'App',
  components: {
    Input,
  },
  methods: {
    consoleMsg(msg) {
      console.log(msg);
    },
  },
};
</script>

<style></style>

• 프로젝트이름/src/components/Input.vue

<template>
  <input type="text" v-model="msg" />
</template>

<script>
export default {
  emits: ['msg'],
  data() {
    return {
      msg: '',
    };
  },
  watch: {
    msg() {
      this.$emit('msg', this.msg);
    },
  },
};
</script>

<style></style>

Input 컴포넌트에 abc를 작성하면 watch 속성이 msg의 데이터 변경을 감지하고 한글자씩 a -> ab -> abc를 콘솔에 출력하는 것을 볼 수 있습니다.

 

동작 순서

1. input의 입력한 데이터를 변경을 감지해줄 v-model='msg' 작성합니다.
2. watch 속성에서 $emit 이벤트를 작성합니다. this.$emit(이벤트이름, input에 감지될 data), emits 속성에 부모 컴포넌트에서 사용할 이벤트이름 'msg'를 작성합니다.
3. 부모 컴포넌트에 생성한 이벤트 작성합니다. @msg="사용할함수이름(consoleMsg)"
4. App.vue - script - methods에 로직을 작성해줍니다.
5. msg 데이터 변화에 따라 콘솔에 글자가 출력합니다.