2-2 Vue 컴포넌트

업로드 목록보니 공부하기 귀찮은거 너무 티난다; 열심히 해야겟답^^

 

1. Vue의 컴포넌트

• 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록. 화면을 빠르게 구조화, 캡슐화 가능하여 일괄적인 패턴으로 개발이 가능하게 한다. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다.

 

Vue 컴포넌트는 Vue 인스턴스이기도 한다. 그러므로 루트를 제외한 모든 옵션 객체를 사용할 수 있다.

뷰의 컴포넌트 : 

• 내비게이션 바 

• 테이블

• 리스트

• 인풋 박스

 

2. 컴포넌트 등록하기

뷰의 컴포넌트는 전역(Global)과 지역(Local) 두 가지가 있다. 일반적인 변수처럼 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가지고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 

 

• 전역(Global) 컴포넌트 등록

전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 변수를 이용하여 등록한다. 뷰 생성자에서 .component() 를 호출하여 수행하면 된다

전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용헌다.

new Vue({

  el: '#some-element',

  // 옵션

})

Vue.component('my-component', {

  // 옵션 : 컴포넌트 내용

})

 

컴포넌트의 내용에는 template, data, method 등 인스턴스 옵션을 정의하면 된다.

 

 

위와 같이 첫번째 인스턴스 영역에서는 지역 및 전역 컴포넌트가 정상적으로 표시되었지만, 두번 째 인스턴스 영역에서는 전역 컴포넌트만 나타났다. 이처럼 전역 컴포넌트는 한번 등록하면 어디서든 사용할 수 있다. 반대로 지역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록 해줘야 한다.

또한 localComponent는 인스턴스1 영역에만 정의되어 있으므로 인스턴스2 영역에는 적용되지 않는다.