싱글파일 컴포넌트에서 개발하는 방법(props / emit)

vue create 명령어를 통해서 Vue 프로젝트를 생성한다.

기본적으로 html에서 작업을 할 때와 유사하다고 할 수 있다.

아래 Sample code를 보면 대략적으로 이해가 가능하다.

기본 vue template의 경우 .vue를 치면 자동완성이 된다. (vetur 설치시)

 

App.vue

 

<template>

<div>

<!--<app-header v-bind:프롭스 속성 이름= "상위 컴포넌트의 데이터 이름"></app-header>-->

<!-- v-on:renew="str" 은 AppHeader에서 emit으로 받아옴. -->

<app-header

v-bind:propsdata="str"

v-on:renew="renewStr"></app-header>

</div>

</template>

<script>

// AppHeader 파일 import

import AppHeader from './components/AppHeader.vue';

export default {

name: 'App',

data() {

return {

str: '프로젝트'

}

},

// components 등록

components: {

'app-header' : AppHeader

},

methods : {

     renewStr : function() {

     this.str = 'hi';

        }

    }

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

 

 

AppHeader.vue

 

<!-- props와 emit -->

<template>

  <header>

    <h1>{{ propsdata }}</h1>

    <button v-on:click="sendEvent">send</button>

  </header>

</template>

 

<script>

export default {

  props: ['propsdata'],

  methods: {

    sendEvent: function() {

      this.$emit('renew');

    }

  }

}

</script>

<style>

</style>