싱글파일 컴포넌트

1. 싱글파일 컴포넌트로 개발 시작하기

<template>
  <div>
    {{str}}
  </div>
</template>

<script>

export default {
  //앞으로 이렇게 하면 안됨! error
  //data : {

  //}
    // 이렇게 해야 함
    data: function() {
        return {
          str: 'hi'
        }
    }

}
</script>

2. vue 컴포넌트 파일 등록하기

<template>
  <div>
    <app-header></app-header>
  </div>
</template>

<script>
//AppHeader의 내용을 app.vue에서 사용하려면
import AppHeader from './components/AppHeader.vue';        //이 파일을 기준으로 같은 위치에서.  가급적 .vue까지 붙여줘야 vscode에서 파일 바로가기를 깨지지 않고 사용함.



export default {
  //앞으로 이렇게 하면 안됨! error
  //data : {

  //}
    // 이렇게 해야 함
    data: function() {
        return {
          str: 'hi'
        }
    },
    components:  {
      'app-header': AppHeader         //위에서 파일명을 import로 가져왔음
    }

}
 

</script>

3.props 내리기 & props 받기

3-1. props 내리기

• App.vue

<template>
<app-header v-bind:propsdata="str"></app-header>
</template>

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

export default {
  data : function() {
    return {
      str : 'Header'
    }
  }, 
  components : {
    'app-header' : AppHeader
  }
  
}
</script>

3-2. props 받기

• AppHeader.vue

<template>
 <header>
  <h1>{{propsdata}}</h1>		받은 props속성 이름으로 표시
 </header>
</template>
  
  <script>
 
  export default {
    props: ['propsdata']
    
  }
  </script>
  
  <style>
  
  </style>