// 컴포넌트가 사용되는 곳에서 연결하는 이벤트 라는 것은 우리가 원하는 이름으로 만들어도
// 상관이 없고 대신 그 이름을 emits 라는 option 으로 받아서 어디에서 어떻게 실행 될
// 것인지를 실제 동작할 수 있는 이벤트에서 정의해 주면 된다.
// 이것 또한 일종의 데이터를 주고받는 행위이다.

// App.vue
// 현재 e 를 출력하는 것은 undefined 가 뜬다. 실제로 사용하는 
// <h1 @dblclick="$emit('whatever')"> 부분에서 두번째 인수가 없기 때문이다.
// 두번째 인수는 데이터를 넘겨줄 수 있다.
<template>
  <MyBtn @whatever="print">
    Banana
  </MyBtn>
</template>

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

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

=============================================================================

// MyBtn.vue
<template>
  <div
    class="btn">
    <slot></slot>
  </div>
  <h1 @dblclick="$emit('whatever')">
    ABC
  </h1>
</template>

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

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

// 위의 event 를 출력하기 위해선
<h1 @dblclick="$emit('whatever', $event)">

// App.vue
<template>
  <MyBtn
    @whatever="print"
    @change-msg="printMsg">
    Banana
  </MyBtn>
</template>

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

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

==============================================================================
// MyBtn.vue
<template>
  <div
    class="btn">
    <slot></slot>
  </div>
  <h1 @dblclick="$emit('whatever', $event)">
    ABC
  </h1>

  <input
    type="text"
    v-model="msg" />
</template>

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

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