props / $emit

props : 부모에서 자식으로 데이터가 내려간다
$emit : 자식에서 부모로 이벤트를 발생

emit 등록방법

1. 간단 등록
2. validation 체크 등록

• 간단 등록

emits : ['click', 'please']

emit 등록이유

1. 명시적으로 이벤트 확인하기 쉬움
2. 필요한 태그에 정확하게 적용을 등록 시킬 수 있다.
   (최상위에서 적용되어 모든 하위 태그 적용시키는 것보다 유연하다)

• validation 체크 등록

emits:{
        click : null,
        please : (number)=>{
          if(number > 10)
            return true
          else {
            console.error('number is not greate than 10')
            return false
          }
        }
      }

props $emit 간단한 예제

• App.vue

<template>
  <h1>{{ msg }}</h1>
  <Hello
    :message="msg"
    @please="reverseMsg"
  />
</template>

<script>
  import Hello from '~/component/Hello.vue'
   export default{
      components : {
        Hello
      },
     data(){
        return {
         msg : 'Hello Vue!'
        }
     },
     methods : {
        reverseMsg(){
          this.msg = this.msg.split('').reverse().join('')
        }
     }
   }
</script>

• Hello.vue

<template>
  <h1 @click="$emit('please')">
    {{ message }}
  </h1>
</template>

<script>
    export default{
      // inheritAttrs : false,
      props : {
        message : {
          type:String,
          default : ''
        }
      },
      //명시적 등록 + a
      emits : ['please'],
      mounted(){
        console.log(this.$attrs)
      }
    }
</script>

props를 통해 msg를 전송하고
$emits를 통해 please라는 이벤트를 만들고 이를 App.vue에서 @please를 통해 등록시켜 reverseMsg라는 함수를 실행시킨다.

$emit으로 click이벤트 커스텀 이벤트로 중첩

<template>
  <h1>{{ msg }}</h1>
  <Hello
    @click="msg+='?!' "
    @please="msg+='~~~'"
  />
</template>

<script>
  import Hello from '~/component/Hello.vue'
   export default{
      components : {
        Hello
      },
     data(){
        return {
         msg : 'Hello Vue!'
        }
     },
   }
</script>

<template>
  <div>
    <h1 @click="$emit('please' , 2)">
      Please
    </h1>
    <h1 @click="$emit('click')">
      Click
    </h1>
  </div>
</template>


<script>
    export default{
      //기존 click이벤트를 커스텀이벤트인 click으로 덮어쓰고 이와 관련된 것이 실행X
      //이기 때문에 App.vue의 @click이 발생X
      emits : ['click', 'please']
    }
</script>

@click으로 등록된 기존 click이벤트도 emits에 click으로 등록되어 적용된다.

$emit / v-model

$emit 예시

• App.vue

<template>
  <h1>{{ msg }}</h1>
  <Hello
    :message="msg"
    @update="msg=$event"
  />
</template>

<script>
  import Hello from '~/component/Hello.vue'
   export default{
      components : {
        Hello
      },
     data(){
        return {
         msg : 'Hello Vue!'
        }
     },
   }
</script>

• Hello.vue

<template>
  <label>
    <input
      :value="message"
      @input="$emit('update',$event.target.value)"
    >
  </label>
</template>

<script>
    export default{
      props:{
        message : {
          type:String,
          default:''
        }
      }
    }
</script>

v-model 예시

• App.vue

<template>
  <h1>{{ msg }}</h1>
  <Hello
    v-model="msg"
  />
</template>

<script>
  import Hello from '~/component/Hello.vue'
   export default{
      components : {
        Hello
      },
     data(){
        return {
         msg : 'Hello Vue!'
        }
     },
   }
</script>

• Hello.vue

<template>
  <label>
    <input
      :value="modelValue"
      @input="$emit('update:modelValue',$event.target.value)"
    >
  </label>
</template>

<script>
    export default{
      props:{
        modelValue : {
          type:String,
          default : ''
        }
      }
    }
</script>

App.vue에서 v-model을 통해 양방향 바인딩을 한다.

• modelValue라는 기본 예약어를 쓰기 싫다면
  현재 써져있는 modelValue를 원하는 문자로 바꾸고 App.vue의
  <Hello v-model="msg" />을
  <Hello v-model:원하는문자="msg" />로 바꾸어주면 같은 동작을 한다.