[VUE] emit

부모 컴포넌트에서 @heropy="log", @change-msg="logMsg" 같이 이벤트를 자식 컴포넌트에 전달하면 emits: ['heropy', 'changeMsg'] 으로 전달 받아 사용 가능합니다. emits에 등록된 emit은 $emit('heropy', $event) 식으로 이벤트 발생시키고, event객체도 부모에게 전달이 가능합니다.

부모 컴포넌트

<template>
  <MyBtn
    @heropy="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>

자식컴포넌트

<template>
  <div class="btn">
    <slot></slot>
  </div>
  <h1 @dblclick="$emit('heropy', $event)">
    ABC
  </h1>
  <input
    type="text"
    v-model="msg" />
</template>

<script>
export default {
  emits: [
    'heropy',
    'changeMsg'
  ],
  data() {
    return {
      msg: ''
    }
  },
  watch: {
    msg() {
      this.$emit('changeMsg', this.msg)
    }
  }
}
</script>

<style scoped lang="scss">
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>