[Vue.js] 싱글 파일 컴포넌트에서 event emit 속성 이용

App.vue

<template>
  <div>
    app
		<!-- AppHeader에서 발생시킨 이벤트명인 renuew를 연결 후 이벤트
    발생 시 renewStr이라는 함수를 실행하겠다는 의미 -->
    <app-header v-on:renew="renewStr" v-bind:propsdata="str"></app-header>
  </div>    
</template>

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

export default {
  components: {
    'app-header': AppHeader
  },
  data: function() {  
    return {
      str: '부모의 글씨'
    }
  },
  methods: {
		//renew 이벤트 발생 시 실행되는 함수(str의 데이터를 'hi'로 변경)
    renewStr: function() {
      this.str = 'hi';
    }
  }
}
</script>

<style>
</style>

AppHeader.vue

<template>
    <header>
      <h1>{{ propsdata }}</h1>
			<!-- 버튼에 클릭 이벤트 추가 -->
      <button @click="sendEvent">send</button>
    </header>
  </template>
    
  <script>
  export default {
    props: ['propsdata'],
    methods: {
				//클릭 이벤트 시 이벤트 이름을 'renuw'로 발생시킴
        sendEvent: function() {
            this.$emit('renew');
        }
    }
  };
  </script>
  
  <style>
  /* 스타일링 옵션들 */
  </style>

reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21466&tab=curriculum 

학습 페이지