02-2.1 컴포넌트 등록 (전역 컴포넌트, 지역컴포넌트)

컴포넌트 등록하기

 - 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있다.

 - 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서

   공통으로 사용할 수 있다.

 - 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있다.

 

전역 컴포넌트 등록

 - 전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.

 - 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다.

 

ex) <전역컴포넌트 등록형식>

      Vue.component('컴포넌트 이름', {

         // 컴포넌트 내용

      });

 

 - 전역 컴포넌트등록 형식에는 '컴포넌트 이름'과 '컴포넌트 내용'이 있다.

 - '컴포넌트 이름'은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미한다.

** 사용자정의 태그(custom tag) : HTML 표준 대그들 이외에도 웹 개발자가 직접 정의하여 사용할 수 있는 태그  

 - 태그 이름의 명명 규칭은 HTML 사용자 정의 태그 스펙에서 강제하는

   '모두 소문자'와 '케밥 기법'을 따르지 않아도 된다.

** 케밥 기법 : 변수가 단어의 조합으로 이루어져 있을 때, 단어와 단어 사이를 -로 잇는 변수 명명 방식

                   ex) my-component  / my-global-component 등

 - 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성한다.

 - 컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.

 

예제 01 p.53 참고

 

 

---------------------------------------------------------------------------------------------------------------------

 

지역 컴포넌트 등록

 - 지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 compnents 속성을 추가하고

   등록할 컴포넌틑 이름과 내용을 정의하면 된다.

 

ex) <지역컴포넌트 등록형식>

     new Vue({

        components : {

          '컴포넌트이름' : 컴포넌트 내용

        }

      );

 

 - 컴포넌트 이름은 전역 컴포넌트와 마찬가지고 HTML에 등록할 사용자 정의 태그를 의미한다.

 - 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 떄의 내용을 의미한다.

 

예제 02 p.55 참고