[콜럼Vue스] 사용자 정의 이벤트

1. 사용자 정의 이벤트란?

Vue에서는 사용자 정의 이벤트(Custom Events)를 통해 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달할 수 있음.

이 방식은 Vue의 단방향 데이터 흐름(부모→자식)을 보완하여 상위 컴포넌트로 이벤트를 전달함으로써,

양방향 데이터 소통을 가능하게 만듦.

자식 컴포넌트에서 이벤트를 발생시키고($emit), 부모 컴포넌트는 해당 이벤트를 수신(v-on)하여 처리함.

 

2. 사용자 정의 이벤트를 이용한 정보 전달

사용자 정의 이벤트를 통해 자식에서 부모로 데이터 전달이 가능함.

주로 양방향 바인딩이나 특정 작업을 부모 컴포넌트에 알릴 때 유용하게 사용됨.

// 부모 컴포넌트 (Parent.vue)
<template>
  <div>
    <ChildComponent @submit="handleSubmit" />
  </div>
</template>

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

export default {
  methods: {
    handleSubmit(formData) {
      console.log('제출된 데이터:', formData);
    }
  },
  components: { ChildComponent }
};
</script>

// 자식 컴포넌트 (ChildComponent.vue)
<template>
  <button @click="submitForm">제출</button>
</template>

<script>
export default {
  methods: {
    submitForm() {
      const data = { name: '홍길동', age: 30 };
      this.$emit('submit', data); // 이벤트 발생과 함께 데이터 전달
    }
  }
};
</script>

 

• 자식 컴포넌트에서 $emit으로 submit 이벤트와 함께 데이터를 부모로 전달.
• 부모 컴포넌트는 @submit으로 이벤트를 수신하고 handleSubmit 메서드를 실행함.

3. 이벤트 유효성 검증

사용자 정의 이벤트를 정의할 때, 전달되는 데이터의 유효성을 검증하는 것이 중요함. 잘못된 데이터를 수신하면 컴포넌트 간의 예상치 못한 동작이 발생할 수 있기 때문임. Vue 3에서는 emits 옵션을 통해 이벤트와 데이터 유효성을 정의할 수 있음.

export default {
  emits: {
    submit: (data) => {
      return data && data.name && data.age > 0; // 데이터가 유효한지 검증
    }
  },
  methods: {
    submitForm() {
      const data = { name: '홍길동', age: 30 };
      this.$emit('submit', data); // 유효한 데이터만 전송
    }
  }
};

설명:

• emits 옵션을 사용해 submit 이벤트가 올바른 데이터만 전달되도록 검증.
• 이벤트가 발생할 때 유효성 검증을 통과하지 못하면 경고가 발생하며, 이벤트가 무시될 수 있음.