[Vue.js]Vue 컴포넌트(지역컴포넌트vs전역컴포넌트)

●컴포넌트

▶조합하여 화면을 구성 할 수 있는 블록(화면에 표시되는 특정 영역)

컴포넌트 장점

1. 화면을 빠르게 구조화 할 수 있다.

2. 일괄적인 패턴으로 개발 가능

3. 컴포넌트로 쪼개서 개발 할 경우 재사용성이 높아진다.

4.코드의 직관적인 이해가능

●컴포넌트 간의 관계는 자료구조의 트리 구조와 유사하다.

●컴포넌트를 등록하는 방법

▶ 전역 컴포넌트

-여러 인스턴스에서 공통으로 사용가능

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

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

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

//컴포넌트 내용

});

-전역컴포넌트 등록형식

  컴포넌트 이름과 컴포넌트 내용이 있다.

  컴포넌트 이름: template 속성에서 사용할 HTML 사용자 정의태그 이름을 의미

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

      -template,data,methods등 인스턴스 옵션 속성을 정의 할 수 있다.

▶지역 컴포넌트

-특정 인스턴스에서만 유효범위를 갖는다.

●지역 컴포넌트와 전역 컴포넌트의 차이

      먼저 인스턴스의 유효범위를 이해해야함

인스턴스의 유효범위란? HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요없이 한번만 등록하면 어느 인스턴스에서나 사용가능

지역 컴포넌트는 새 인스턴스를 생성 할 때마다 등록해줘야한다.