[ Vue.js ] Component 등록의 2가지 방법(전역/지역) 과 번외

Vue.js 에서 Component (컴포넌트)를 3가지 방법으로 선언할 수 있다.

1. Global (전역 선언)
2. Local (지역 선언)
3. 파일 분리

 

1,2번의 방법은 사실 별로라고 생각한다. 그 이유인즉슨, 특정 컴포넌트 내에 또 다른 컴포넌트를 작성하여 적용시키는 방법이라 생각하면 되는데, 가독성이 좋지 않다.

물론 컴포넌트를 한 개의 파일에서 관리할 수 있다는 매력이 있지만, 애초에 `template` 속성 내에 전부 때려 넣다보니 편리함보다는 오히려 보기가 너무 불편하다.

Syntax Highlight 지원도 받기 어렵다. (혹시 있나?)

 

■ Global [전역]

예시)

이렇게 ' component 명' 을 먼저 선언하고,
그 뒤에 template 속성을 선언하여  `  ` 속에 html 을 비롯한 모든 태그들을 작성하는 것이다.

 

■ Local [지역]

지역 선언은 전역과 약.간. 다르다.

예시)

차이점은 변수에 할당한다는 점... ( ES6로 넘어오면서 코드의 엄격성을 생각하여 var 사용은 자제하자.)
나머지는 동일하게 template 내에 작성한다.

 

■ 파일분리

가장 선호하는 방식이고, 주로 사용되는 방식이다.

[ Header.vue,  Content.vue ] 가 있다면, Header.vue 내에 Content.vue를 import하여 사용하는 것이다.

 

경로는 같은 폴더 내를 기준으로 작성하였습니다.

 

이렇게 넣으면 컴포넌트 간에 따로 파일을 관리하여 유지보수 하기에 용이하다.

데이터 통신을 하기 위해서는 다른 수고를 넣어야하지만, 가독성이 좋아져서 선호한다.

 

 

 

참고 

Components | Cracking Vue.js