emit 흐름구조

emit는 상급vue에게 하급vue event를 넘겨준다.

1. html에 이벤트를 만들어 준다.
<div>
      <h1>{{ myMessage }}</h1>
      <p>뀨</p>
      <!-- v-model은 양방향 바인딩 -->
    	<!--  -->
      <input type="text" v-model="childInputData" //2번
       @keyup.enter="childInputChange"> //3번
    </div>
</template>

2. 이벤트에 맞는 function을 만들어준다.
data: function() {
    return {
      childInputData: '' // 이부분
    }

3. 이벤트에 맞는 method를 맞춰 만들어준다.
 methods: {
    childInputChange: function() {
      console.log('child!', this.childInputData)
      // 부모 컴포넌에게 1번인자 라는 이벤트를 발생 + 2번인자부터 데이터를 보냄
      this.$emit('child-input-change',this.childInputData) 
      // this.$emit으로 보낼 이벤트명과(child-input-change)    ,이벤트 콜백함수(this.childInputData)
      를 보내준다
    }
  },
      
 childInputChange가 실행이 되는 순간, 상위 vue에게 보내진다.

4.하위 vue의 이벤트를 듣기 위해 
@받은이벤트명(child-input-change)= 받았을때 실행할 메서드 명("parentGetChange")을 작성

<the-about :my-message="parentsData"
    @child-input-change="parentGetChange"></the-about>

5. 상위 vue에 method를 만들어준다.

 methods: {
    parentGetChange: function(inputData) {
      console.log('들리는군..', inputData)
    }
  }