Vue.js] 13. Component > Events

컴포넌트는 내장 $emit 메소드를 사용해서 사용자 정의 이벤트를 발생시킬 수 있다. 

<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

 

부모는 v-on을 사용해서 수신할 수 있다. 

<MyComponent @some-event="callback" />
<MyComponent @some-event.once="callback" />

템플릿에서는 kebab-case 이벤트 리스너를 사용하는 것이 좋다. 

native DOM 이벤트와 달리, 컴포넌트에서 발생한 이벤트는 버블리되지 않는다. direct 자식 컴포넌트에서 발생한 이벤트만 수신할 수 있다. 

 

Event Arguments

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>
<MyButton @increase-by="(n) => count += n" />
<MyButton @increase-by="increaseCount" />
methods: {
  increaseCount(n) {
    this.count += n
  }
}

 

Declaring Emitted Events

컴포넌트는 emits 옵션을 사용하여 발생할 이벤트를 명시적으로 선언할 수 있다. 

이벤트를 정의하는 것은 선택 사항이지만, 컴포넌트가 어떻게 동작해야 하는지 더 잘 문서화하기 위해 모든 발생 이벤트를 정의하는 것이 좋습니다. 

 

Events Validation

객체로 정의된 이벤트는 유효성 검사가 가능하다. 

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

    // submit 이벤트 유효성 검사
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}