뷰 컴포넌트

• 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.

전역 컴포넌트 등록

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

Vue.component('컴포넌트 이름', {
    //컴포넌트 내용
});

• 컴포넌트 이름 : HTML에서 사용할 사용자 정의 태그 이름을 작성한다.
• 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성한다. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.
• 뷰 라이브러리 파일 로딩 → 뷰 생성자로 컴포넌트 등록 Vue.component() → 인스턴스 객체 생성(옵션 속성 포함) → 특정 화면 요소에 인스턴스 부착 → 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환) → 변환된 화면 요소를 사용자가 최종 확인
  • 인스턴스가 생성되고 인스턴스 내용이 화면 요소로 변환될 때 컴포넌트 태그도 함께 변환된다. 즉, 컴포넌트 내그에 정의한 컴포넌트 내용은 사용자가 볼 수 있는 형태의 화면 요소로 최종 변환된다.
• 따라서 아래의 컴포넌트를 HTML에 추가하면 최종적으로 컴포넌트가 등록된다.

<my-component></my-component>

 

지역 컴포넌트 등록

• 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.
• 컴포넌트 이름과 내용의 의미는 전역 컴포넌트와 동일하다. 

new Vue({
    components: {
        '컴포넌트 이름': '컴포넌트 내용'
    }
});

 

전역 컴포넌트 vs 지역 컴포넌트

• 전역 컴포넌트와 지역 컴포넌트는 유효 범위가 다르다.
• 전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다.
• 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해 줘야 한다.
• ★ 실무에선 플러그인이나 라이브러리 같이 전역으로 사용해야될 때 전역 컴포넌트로 한 번만 등록하고, 나머지는 대부분 지역 컴포넌트로 등록한다.