[Vue] vue.component와 export default방식의 차이

 

Vue.component : 전역 컴포넌트로 사용
이는 중소 규모 프로젝트에서 유용하며, 좀 더 복잡한 프로젝트나 프론트엔드가 Javascript기반인 경우 단점이 생긴다.

- 모든 구성 요소에 대해 고유한 이름을 지정하도록 강요되어짐
- 구문 강조가 약하기 때문에 여러 줄로 되어진 HTML에 가독성이 좋지 않은 슬래시가 많이 들어감
- HTML, Javascript가 컴포넌트로 모듈화 되어있으나, CSS는 지원되지 않음

이러한 단점을을 Webpack, Browserify같은 빌드 도구를 이용하여 .vue 확장자를 가진 싱글 파일 컴포넌트로 해결(export default)할 수 있다.

.vue 파일이 하나의 독립적인 컴포넌트 기능을 함

 

<template>
  div 
  p {{greeting}} World!
  other-component
</template>

<script>
import OtherComponent from './OtherComponent.vue'
export default = {
	data () {
		return {
			greeting : 'hello'
		}
	},
	component : {
		OtherComponent
	}
}
</script>

<style>
</style>