[Vue.js] 컴포넌트 - Emit

컴포넌트 - Emit

1. 이벤트 상속

//App.vue(부모 컴포넌트)
<MyBtn @click="log">Banana</MyBtn>
export default {
  components: {
    MyBtn
  },
  methods: {
    log() {
      console.log('Click!!')
    }
  }
}

//MyBtn.vue(자식 컴포넌트)
<div class="btn">
    <slot></slot>
</div>
export default {
  inheritAttrs: false
}

MyBtn 태그에 클릭 이벤트 발생시에 실행할 method를 연결하였습니다.

그러나 @click이라는 속성으로 연결을 하였기 때문에 자식 컴포넌트에 inheritAttrs: false 값으로 인해 클릭을 하여도 method가 실행되지 않습니다.

자식 컴포넌트에 최상위 요소가 2개 이상이고 inheritAttrs 옵션을 사용해야하는 경우라면 이벤트를 적용할 수 없습니다.

하지만 이벤트도 $attrs와 비슷하게 필요한 경우에만 개별로 적용할 수 있습니다.

2. Emit

이렇게 이벤트 속성을 가능하게 만드는 것이 바로 emit입니다.

//MyBtn.vue(자식 컴포넌트)
<script>
export default {
  emits: [
    'click'
  ]
}
</script>

위와 같이 emits 라는 옵션을 추가하여 배열 데이터로 부모 컴포넌트에서 추가한 옵션인 클릭 이벤트를 사용하겠다고 명시하시면 됩니다.

//MyBtn.vue(자식 컴포넌트)
<template>
  <h1 @click="$emit('click')">ABC</h1>
</template>

그리고 template 태그에 <h1 @click="$emit('click')"> click 옵션에 $emit이라는 메소드에 emits 옵션에 정의한 'click'을 입력해주시면 됩니다. 그러면 부모 컴포넌트(App.vue)에 정의한 log() 메소드가 실행되는 것을 확인할 수 있습니다.

3. 추가 코드 예시

이렇게 emit이라는 키워드를 통해 원하는 이름의 이벤트를 자유롭게 만들어 사용할 수 있습니다. 그리고 이를 활용하여 부모 컴포넌트와 자식 컴포넌트 간의 이벤트와 데이터를 주고 받을 수 있습니다.

//App.vue(부모 컴포넌트)
<template>
  <MyBtn
    @dongit="log"
    @change-msg="logMsg">
    Banana
  </MyBtn>
</template>
<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  },
  methods: {
    log(event) {
      console.log('Click!!')
      console.log(event)
    },
    logMsg(msg) {
      console.log(msg)
    }
  }
}
</script>

//MyBtn.vue(자식 컴포넌트)
<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1 @dblclick="$emit('dongit', $event)">
    ABC
  </h1>
  <input
    type="text"
    v-model="msg" />
</template>
<script>
export default {
  emits: [
    'dongit',
    'changeMsg'
  ],
  data() {
    return {
      msg: ''
    }
  },
  watch: {
    msg() {
      this.$emit('changeMsg', this.msg)
    }
  }
}
</script>