[vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기)

 

vue.js 하위 컴포넌트 만들기

 

한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고,
상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다.

순서

1. 폴더 안에 각 하위 컴포넌트 vue 파일 생성
2. 상위 컴포넌트(App.vue) script 내에 하위 컴포넌트로 import로 콜
3. export default, components 메소드 안, import한 하위 컴포넌트 export 처리
4. 상위 컴포넌트 template 태그내, 각 하위 컴포넌트 태그 삽입

 

 

이렇게 컴포넌트 작업이 완료되었습니다.

main.js 파일을 확인해 보면,
각각의 하위 컴포넌트가 하나로 합쳐진 App.vue 파일이 import가 되어
아래 vue 인스턴스를 통하여
Virtual Dom 화면에 출력이 됩니다.