컴포넌트-Emit

Emit

순서대로 천천히 쓰는 emit 방법

• 만약 최상위 컴포넌트가 2개 이상이라 이벤트를 가져오지 못한다면?

1. App.vue에 있는click 이벤트를 MyBtn.vue로 가져와서 script에 emits에 붙여넣는다.

2. 내가 연결할 요소에 이벤트를 앞에 넣는다. 만약 h1태그에 연결한다고 하면, h1 @click="$emit()">ABC</h1> 이런식으로!

3. 그리고 내가 연결할 이벤트를 첫번째 인자로 넣으면 된다.
   h1 @click="$emit('click')">ABC</h1> 이렇게
   

4. 그러면 부모요소에 있는 이벤트를 실행할 수 있다.

• App.vue

<template>
  <MyBtn
    @click="log">
    Banana
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'

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

• MyBtn.vue

<template>
  <div 
    class="btn">
    <slot></slot>
  </div>
  <h1 @click="$emit('click')">ABC</h1>
</template>

<script>
export default {
  emits: [
    'click'
  ]
}
</script>

조금 더 어려운 emit

input요소에 값을 입력하면 순서대로 console 창에 찍힘. 예를들어 123을 입력하면 console에 1 / 12 / 123 이런식으로 바로 찍히는 모습을 볼 수 있음

• App.vue

  <MyBtn
    @clickcc="log"
    @change-msg="logMsg">
    Banana
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'

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

• MyBtn.vue

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

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

위의 내용을 정리하면

1. MyBtn.vue이라는 컴포넌트에input요소에 데이터를 입력할 때 마다, msg가 v-model이 있으니까 양방향 데이터 바인딩으로 갱신 될 수 있는 구조이다.

2. watch라는 옵션을 통해 갱신되는 msg를 감시해서 변경될 때 마다 안에 내용을 실행한다. 실행되는 내용은 $emit을 실행해 changeMsg라는 이벤트가 발생한다.

3. 이제 App.vue 에 연결되어있는 @change-msg가 실행되고 이로인해 logMsg가 동작하는데 이거는 아래 methods에 있는 logMsg(msg)가 동작된다.

4. 여기에 있는 첫번째 매개변수는 이걸 어디서 받아와서 console.log로 출력하는데

5. 이건 MyBtn.vue 컴포넌트 내부에 watch에 this.$emit이라는 method에 작성이 되어져있는 두번 째 인수 부분에 this.msg로 실제 우리가 입력한 그 데이터를 양방향 바인딩으로 연결해놓은 그 데이터가 된다.

6. 그게 console.log에 출력되고, 이게 우리가 실제 입력한 값이 된다.