[Vue3] 컴포넌트 이벤트

1. 이벤트 발신 및 수신

• 컴포넌트는 내장 메서드 $emit을 사용하여 v-on 디렉티브 등에서 사용자 정의 이벤트를 발신할 수 있다.

<!-- 자식 컴포넌트 -->
<button type="button" @click="$emit('someEvent')">Click</button>

• $emit 메서드는 컴포넌트 인스턴스에서 this.$emit()으로도 사용할 수 있다.

// 자식 컴포넌트
export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

• 부모 컴포넌트는 v-on 디렉티브를 사용하여 수신할 수 있다.

<ChildComponent @some-event="count++" />

• .once 수식어는 컴포넌트 이벤트 리스너에서도 지원된다.
  • .once : HTML 코드로 출력이 된 이후 값에 변화가 있더라도 처음 출력한 값을 유지

<ChildComponent @some-event.once="count++" />

• 컴포넌트 및 props와 마찬가지로 이벤트명은 자동 대소문자 변환을 제공한다. 위 예제에서 camelCase 형식으로 이벤트를 발신했지만 부모 컴포넌트에서 kebab-case 형식의 리스너를 사용하여 수신할 수 있다. props와 마찬가지로 템플릿에서 kebab-case 형식의 이벤트 리스너를 사용하는 것이 좋다.

💡 실제 HTML DOM 이벤트와 달리 Vue 컴포넌트에서 발신되는 이벤트는 버블이 발생하지 않는다. 직접 자식 컴포넌트에서 발생하는 이벤트만 수신할 수 있다. 다른 컴포넌트와 통신이 필요한 경우 글로벌 상태 관리를 하는 것도 좋다.

---

2. 이벤트 인자

• 이벤트와 함께 특정값을 보낼 수도 있다.
• $emit에 추가 인자를 전달하여 값을 제공할 수 있는데 아래 예제를 통해 확인할 수 있다.
• $emit을 통해 increaseBy 이벤트와 인자값 1을 부모 컴포넌트에 발신하고 있다.

<!-- ChildComponent.vue -->
<template>
  <p>count: {{ count }}</p>
  <button type="button" @click="$emit('increaseBy', 1)">Click</button>
</template>

<script>
export default {
  props: ['count'],
  emits: ['increaseBy']
}
</script>

• 부모 컴포넌트에서 이벤트를 수신할 때 인라인 화살표 함수를 리스너로 사용할 수 있다.

<ChildComponent @increase-by="(n) => count += n" :count="count" />

• 인라인 화살표 함수 뿐만 아니라 메서드로도 이벤트를 수신할 수 있다.
• 인자값이 해당 메서드의 첫번째 파라미터로 전달된다.

<template>
  <ChildComponent @increase-by="increaseCount" :count="count" />
</template>

<script>
  ...
  methods: {
    increaseCount(n) {
      this.count += n;
    }
  }
}
</script>

$emit()에서 이벤트명 뒤에 붙는 인자 수는 제한이 없습니다. 예를 들어 $emit('some-event', 1, 2, 3, 4)를 사용하면 4개의 인자를 전달하는 것입니다.

---

3. 발신되는 이벤트 선언

• 위에서 사용했던 것처럼 컴포넌트는 emits 옵션을 통해 발신할 이벤트를 선언한다.

export default {
  emits: ['inFocus', 'submit']
}

• setup()의 다른 속성들처럼, emit도 구조분해가 가능하다.

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

• emits 옵션은 객체 구문도 지원하기 때문에 발신되는 이벤트의 전달 내용에 대한 유효성 검사 등을 수행할 수 있다.

export default {
  emits: {
    submit(payload) {
      ...
    }
  }
}

---

4. 이벤트 유효성 검사

• $emit() 메서드를 통해 전달되는 인자값에 대한 유효성 검사를 객체 구문으로 정의하여 진행할 수 있다.
• 유효성 검사를 추가하기 위해 methods 속성에서 this.$emit() 호출 시 전달되는 인자를 수신한다.
• 이벤트가 유효한지에 대한 여부를 boolean 값으로 반환하면 된다.

export default {
  emits: {
    // 유효성 검사 없음
    click: null,

    // submit 이벤트 유효성 검사
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('submit 이벤트 페이로드가 옳지 않음!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}