시작하기

새로 만든 vue 프로젝트에 기본으로 설치되어있는 hello.vue는 삭제한다. App.vue 에 기존에 작성된 내용은 다 지운후 vue + tab 키로 새로운 템플릿을 생성한다. 이제 우리가 그동안 실습한 내용을 vue 파일에 작성할 수 있다.

기존 방식과의 문법 차이

싱글 파일 컴포넌트를 쓴다는 것은 데이터나 다른 속성을 해당 파일 내에서만 사용한다는 것이기 때문에 data 속성을 선언하더라도 아래 코드와 같이 function 으로 반환해준다.

new Vue({
  data: {
    str: hi
  }
})
// 위 코드와 아래 코드는 동일하다
export default {
  data: function() {
    return {
      str: 'hi'
    }
  }
}

App.vue 파일에서 별도 컴포넌트 등록해 props, event 주고받도록 구현하기

components 폴더에 파일 생성

• 컴포넌트 파일명은 파스칼케이스로 작성한다

• 컴포넌트 이름은 최소한 두단어로 작성한다

  HTML 기본 태그와 충돌하지 않기 위함

App.vue 파일에 파일 불러오기

import 문법을 사용해 AppHeader 라는 변수에 경로의 파일을 담아준다

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

파일 경로에 .vue 확장자를 붙이면 VScode에서 기본으로 제공하는 파일 열기 기능을 사용할 수 있다.

불러온 컴포넌트(AppHeader) 를 사용하기 위해 export 쪽에 components 속성을 추가해준다.

export default {
  components: {
    'app-header': AppHeader
  }
}

그리고 템플릿 부분에 아래와 같이 태그를 입력해주면 AppHeader.vue 파일에 작성된 내용이 출력된다.

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

Props 등록하기

1. App.vue 파일(인스턴스)에 data 작성
2. AppHeader.vue 에 props 속성 작성