Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)

Vue emit 사용법 및 예제 (How to Emit Data in Vue)

이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다.

emit이란?

이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다. 이벤트를 전달함으로써 상위 컴포넌트는 하위 컴포넌트에서 전달하는 값을 전달받을 수 있습니다.

예시

이벤트 emit 단계는 아래와 같습니다.

• 부모 컴포넌트는 자식 컴포넌트로 count prop를 전달합니다.
• 자식 컴포넌트는 increment, decrement 메서드를 통해 수정된 값을 change emit을 통해 부모 컴포넌트로 넘겨줍니다.
• 부모 컴포넌트는 전달받은 값을 활용해서 count 데이터를 업데이트합니다.

아래 코드는 부모 컴포넌트 예시입니다. 부모 컴포넌트에서 count 데이터를 관리하고 있습니다. count 데이터를 자식 컴포넌트(Child)의 props로 넘겨줍니다.

// 부모 컴포넌트(Parent)
<template>
  <div>
    <span>{{ count }}</span>
    <Child :count="count" @change="change" />
  </div>
</template>

<script>
import Child from "./Child";
export default {
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    change(value) {
      this.count = value;
    },
  },
};
</script>

아래 코드는 자식 컴포넌트 예시입니다. 자식 컴포넌트는 increment, decrement 메서드를 통해 부모 컴포넌트에서 받은 count prop에 더하거나 빼서 다시 부모 컴포넌트로 값을 넘겨줍니다. 부모 컴포넌트로 이벤트를 넘겨줄 때 아래와 같이 emit을 활용할 수 있습니다.

// 이벤트 emit 예시
this.$emit('이벤트 명');

예시에서 emit의 이벤트 명은 change로 count prop에 값을 더하거나 빼서 이벤트를 발생시킵니다.

// 자식 컴포넌트(Child)
<template>
  <div>
    <button @click="decrement">-</button>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    increment() {
      this.$emit("change", this.count + 1);
    },
    decrement() {
      this.$emit("change", this.count - 1);
    },
  },
};
</script>

다시 부모 컴포넌트를 자세히 살펴보면 자식 컴포넌트에서 발생한 이벤트 emit의 change를 아래와 같이 받을 수 있습니다.

// v-on:이벤트 명="상위 컴포넌트의 실행할 메서드 명 또는 연산"
// v-on은 @로 대체할 수 있습니다.
<Child :count="count" @change="change" />

이벤트 emit을 통해 발생한 change 이벤트를 부모 컴포넌트의 change 메서드를 통해 처리합니다. change 메서드에서 첫 번째 파라미터로 전달받은 value를 활용해서 count 데이터를 업데이트합니다.

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    change(value) {
      this.count = value;
    },
  },
};

결과