23. Vue- Emit(2)

- 본 포스팅은 이전 포스팅과 이어지는 내용입니다. 

- 이전 포스팅을 읽고 본 포스팅을 이해하는 것을 추천합니다. 

 

1. emit에서 event 객체 사용하기 

a) 예제코드 

[App.vue]

<template>
  <MyBtn @keydown="log">
    Banana?
  </MyBtn>
</template>

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

 

[MyBtn.vue]

<template>
  <div
    class="btn">
    <slot></slot>
  </div>
  <h1 @dblclick="$emit('keydown')">
    h1태그 입니다.
  </h1>
</template> 

<script>
export default {
  emits: [
    'keydown'
  ]
}
</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>

 

[출력화면]

- App.vue에서 event 객체를 등록하여 해당 이벤트가 동작하면 event 객체의 내용이 출력되도록 하였다. 

- 하지만, 위의 출력화면에서 확인할 수 있듯이 콘솔에 undefined 라고 나오는 것을 확인할 수 있다. 

- 이 부분이 확실히 출력되도록 설정하는 방법을 알아보자. 

 

b) event 객체 이용방법(1)

- 위의 코드에서 emit을 사용하는 부분에 매개변수를 하나 더 집어넣었다. 

- 123이라는 숫자는 event 객체를 통해서 전달되는 값이다. 

- 이 방법을 통해서 커스텀한 로그 기록을 생성할 수 있다. 

 

c) event 객체를 이용방법(2)

개발자 도구의 콘솔화면

- emit 부분에 매개변수를 추가하고, 해당 매개변수를 $event로 설정하면 다음과 같은 로그를 확인할 수 있다. 

- 출력 로그를 살펴보면, 해당 emit이 발동된 event정보가 출력되는 것을 확인할 수 있다. 

- 이전에 이벤트 포스팅에서 배운 것 처럼, chaining을 이용하여 event 객체의 다양한 정보를 확인할 수도 있다. 

 

개발자 도구의 콘솔화면

---

2. event 객체를 이용한 입력값 반환 

- 이번에는 이전 포스팅에서 배웠던 v-model과 watch를 이용해 볼 것이다. 

- event객체, v-model, watch, emit을 이용하여 입력된 문자열을 로그로 반환해보자. 

- 예제 코드는 다음과 같다. 

 

a) 예제코드

[App.vue]

<template>
  <MyBtn
    @keydown="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('keydown', $event.target)">
    h1태그 입니다.
  </h1>
  <input
    type="text"
    v-model="msg" />
</template> 

<script>
export default {
  emits: [
    'keydown',
    '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>

 

[출력화면]

 

[동작순서]

클릭하면 확대됩니다.

- 코드의 동작 순서는 다음과 같다. 

1. 사용자가 input태그에 무언가 입력하면 msg의 내용이 변경되어 watch가 작동한다.

2. watch에 등록한 msg()의 내용이 실행된다. emit에서 changeMsg 메소드를 찾는다.  

3. emit에서 changeMsg 메소드가 호출된다.

4. App.vue에 등록해놓은 change-msg 이벤트가 실행된다. 

5. logMsg 이벤트 메소드가 실행되면서 watch로 부터 넘겨받은 this.msg의 내용을 가져온다.

6. this.msg의 내용을 로그에 출력한다.