●컴포넌트
▶조합하여 화면을 구성 할 수 있는 블록(화면에 표시되는 특정 영역)
컴포넌트 장점
1. 화면을 빠르게 구조화 할 수 있다.
2. 일괄적인 패턴으로 개발 가능
3. 컴포넌트로 쪼개서 개발 할 경우 재사용성이 높아진다.
4.코드의 직관적인 이해가능
●컴포넌트 간의 관계는 자료구조의 트리 구조와 유사하다.
●컴포넌트를 등록하는 방법
▶ 전역 컴포넌트
-여러 인스턴스에서 공통으로 사용가능
-전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록
-전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행
EX) Vue.component('컴포넌트 이름',{
//컴포넌트 내용
});
-전역컴포넌트 등록형식
컴포넌트 이름과 컴포넌트 내용이 있다.
컴포넌트 이름: template 속성에서 사용할 HTML 사용자 정의태그 이름을 의미
컴포넌트 내용: 컴포넌트 태그가 실제 화면의 HTML요소로 변환 될 때 표시될 속성들을 컴포넌트 내용에 작성
-template,data,methods등 인스턴스 옵션 속성을 정의 할 수 있다.
▶지역 컴포넌트
-특정 인스턴스에서만 유효범위를 갖는다.
●지역 컴포넌트와 전역 컴포넌트의 차이
먼저 인스턴스의 유효범위를 이해해야함
인스턴스의 유효범위란? HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것
전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요없이 한번만 등록하면 어느 인스턴스에서나 사용가능
지역 컴포넌트는 새 인스턴스를 생성 할 때마다 등록해줘야한다.
'Vue.js' 카테고리의 다른 글
[Vue.js]뷰 인스턴스 및 라이프 사이클 (0) | 2018.11.21 |
---|---|
[Vue.js]Vue 개념 및 특징 (0) | 2018.11.21 |