컴포넌트 - Emit

컴포넌트에서 부모요소 vue 파일에서 선언된 이벤트를 사용하기 위해서는 Emit이라는 속성을 사용해야 한다.

 

부모요소에서 이벤트 이름을 사용자가 정의하여 사용하고 component에서 emits에서 부모요소 이벤트 이름을 선언해주고 component 이벤트 선언부에서 적용해준다.

 

Emit 속성을 이용하여 부모요소의 이벤트들을 사용할 수 있다.

 

App.vue 코드

<template>
  <!-- @change-msg1: 이벤트는 컴포넌트에서는 카멜케이스로 되어있지만 보통 카멜케이스를 사용하지 않기 때문에 '-'를 이용해서 사용한다. -->
  <MyBtn
    @click="log"
    @happy="log2"
    @change-msg1="logMsg">
    Banana
  </MyBtn>
</template>

<script lang="ts">
import MyBtn from '~/components/MyBtn3'
export default {
  components: {
    MyBtn
  },
  methods: {
    log()  {
      console.log('Click!!')
    },
    log2(event)  {
      console.log('Emits 확인')
      console.log(event)
    },
    logMsg(msg){
      console.log(msg)
    }
  }
}
</script>

 

component 코드

<template>
  <div
    class="btn">
    <slot></slot>
  </div>
  <h1 @click="$emit('click')">
    확인
  </h1>
  <h1 @click="$emit('happy')">
    Emit 확인
  </h1>
  <h1 @dblclick="$emit('happy', $event)">
    Event 객체를 전달 받는 방법
  </h1>
  v-model(양방향 데이터 바인딩): 
  <input
    type="text"
    v-model="msg" />
</template>

<script>
export default {
  // 해당 component 쪽에서 메소드를 사용하기 위해 선언(최상위 객체가 여러개일 경우)
  emits: [
    'click',
    'happy',
    'changeMsg1'
  ],
  data () {
    return {
      msg: ''
    }
  },
  // 데이터 변환 확인
  watch: {
    msg () {
      this.$emit('changeMsg1', 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>

 

브라우저 확인