[Vue.js] 17. 컴포넌트 - Emit

최상위 요소가 2개 이상이거나, inheritAttrs 옵션이 false이면 속성 상속이 자동으로 이뤄지지 않는다.

이벤트 또한 마찬가지로 같은 상황에서 자동적으로 상속이 이뤄지지 않는다.

속성을 넘겨주기 위해서는 $attrs를 이용했으나 이벤트를 넘겨주기 위해서는 Emit을 사용해야한다.

emits는 배열 데이터를 사용하는 것에 유의한다.

 

이벤트 이름

컴포넌트 및 props와는 달리, 이벤트는 자동 대소문자 변환을 제공하지 않는다.

emit할 이벤트의 이름은 정확한 이름을 사용해야 한다.

예를들어 myEvent를 emit하는 경우, 카멜 케이스로 작성된 이름을 케밥케이스로 청취할 경우 제대로 동작하지 않는다.

또한 HTML은 대소문자를 구분하지 않기 때문에 v-on 이벤트리스너는 항상 자동으로 소문자 변환하여

@myEvent를 @myevent로 변환한다.

따라서 이벤트 이름으로는 항상 케밥케이스(kebab-case)를 사용하는 것이 권장된다.

컴포넌트 인스턴스를 선언하는 곳에서는 어차피 emit을 이용하여 이벤트를 사용하므로, 메소드의 이름을 다르게 설정해도 된다.

$emit() 메소드에서 두 번째 인수를 넣어주면 그 값을 기존 이벤트에서 매개변수로 받아 사용할 수 있다.

$emit('이벤트명', 두번째 인수)

위의 두번째 인수를 log(a) 메소드에서 a로 받아 사용할 수 있다.

두번째 인수자리에 $event를 넘겨주게 된다면 해당 이벤트 객체가 넘어가게 된다.

 

input요소에서 값이 변경될 때 마다 메소드 실행하기

다른 컴포넌트의 input요소에서 일어난 변화를 App.vue에서 감지하기 위해서는

1. 먼저, 양방향 데이터 바인딩이 완료된 상태의 input 요소가 필요하다.

2. emits: 의 배열에 내보낼 때 사용할 메소드 이름을 기명한다.

 emits: [
    'star',
    'change-msg',
  ],

3. watch에 다음과 같은 코드를 입력한다.

  watch: {
    msg() {
      this.$emit('change-msg', this.msg);
    },
  },

이는 msg가 변경될 때마다 msg를 change-msg라는 메소드를 통해 바깥으로 내보내겠다는 의미이다.

4. App.vue에서 @change-msg 이벤트에 연결할 메소드를 선언한다.