[Vue.js] Vue 이벤트(emits) 발생과 수신 이해하기

이벤트(emits)란?

Vue.js에서 이벤트(emits)는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위한 메커니즘입니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트에서 해당 이벤트를 수신하여 처리할 수 있습니다. 이를 통해 컴포넌트 간의 통신을 할 수 있습니다.

예제

아래 예제에서는 자식 컴포넌트에서 버튼을 클릭할 때마다 이벤트를 발생시키고, 부모 컴포넌트에서 해당 이벤트를 수신하여 처리하는 예제를 보여줍니다.

자식 컴포넌트 (ChildComponent.vue):

<template>
  <button @click="handleClick">클릭</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', '이벤트 발생!');
    }
  }
}
</script>

부모 컴포넌트 (ParentComponent.vue):

<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
    <p>이벤트 메시지: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleCustomEvent(payload) {
      this.message = payload;
    }
  }
}
</script>

설명

• 자식 컴포넌트에서는 $emit 메소드를 사용하여 이벤트를 발생시킵니다. 이때, 첫 번째 인자로 이벤트 이름을 지정하고, 두 번째 인자로 전달할 데이터를 넘깁니다.
• 부모 컴포넌트에서는 자식 컴포넌트를 사용할 때 @이벤트이름을 통해 해당 이벤트를 수신하고, 수신한 데이터를 처리합니다.

주요 특징

• 단방향 데이터 흐름: 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있습니다.
• 유연한 통신: 컴포넌트 간의 통신을 쉽게 구현할 수 있습니다.