[Age of Vue] Vue.js 시작하기 - 32. 싱글 파일 컴포넌트 생성하여 배운 내용 적용해보기 (3)

싱글 파일 컴포넌트에서 event emit을 구현해보자

---

AppHeader.vue

<!-- 컴포넌트는 대문자로 시작하는 최소 두 단어로 조합 (html 기본 태그와 헷갈릴 수 있으므로)-->
<template>
  <header>
      <h1>Header</h1>
      <!-- App.vue에서 props 데이터로 넘어온 값이 자동으로 들어옴-->
      <h1>{{ propsdata }}</h1>
      <button v-on:click="sendEvent">send</button>
  </header>
</template>

<script>
export default {
    //인스턴스 옵션
    //1.propsdata라는 이름의 배열에 상위컴포넌트에서 내려온 props data담는다.
    props : ['propsdata']
    , methods : {
        sendEvent : function () {
          //위쪽 컴포넌트 즉, App.vue로 renew라는 이름의 이벤트가 전달
          //그럼 App.vue에서는 태그에 v-on으로 renew라는 이벤트를 연결해서 
          //그 이벤트가 실행되면 호출되는 function을 정의할 수 있다.
          this.$emit('renew');
      }
    }
}
</script>

<style>

</style>

 

 

App.vue

<template>
  <!-- template에는 html element가 최상위 1개만 있어야한다 -->
  <div>
    {{ str }}
    <!--
            //AppHeader.vue에서 정의한 이름="App.vue(상위 컴포넌트)의 데이터 이름"
      <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
      str이라는 data가 왼족의 프롭스로 담겨 내려감
    -->
              <!-- 2. AppHeader.vue에서 정의한 이름인 propsdata를 넣어줌 -->
    <app-header 
    v-bind:propsdata="str"
    v-on:renew="renewStr">
    </app-header>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'

export default {
  data : function() {
    return {
      str : 'Header'
    }
  },
  components : {
    //내가 정의한 컴포넌트 변수 : 내가 정의한 import 변수
    'app-header' : AppHeader
  },
  methods : {
    renewStr : function() {
      //Header->hi
      //propsdata인 Header가 renew 이벤트에 의해 hi로 바뀜
      this.str = 'hi'; 
    }
  }
}
</script>

<style>
</style>