뷰 컴포넌트
컴포넌트는 조합해서 화면을 구성할 수 있는 블록을 말한다.
뷰에서는 웹 화면을 구성할 때 일반적으로 사용하는 내비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.
전역 컴포넌트와 지역 컴포넌트가 있다.
지역 컴포넌트는 특정 인스턴스에서만 유효하고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.
전역 컴포넌트 등록
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});
컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 말한다.
컴포넌트 내용에는 컴포넌트 태그가 실제 화면 HTML 요소로 변환될 때 표시될 속성들을 작성한다.
여기에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.
전역 컴포넌트 등록 예제
<div id="app">
<button>컴포넌트 등록</button>
<sample-component></sample-component>
</div>
<script src="vue.js"></script>
<script>
Vue.component('sample-component', {
template: '<div>전역 컴포넌트 등록 완료</div>'
});
new Vue({
el: '#app'
});
</script>
지역 컴포넌트 등록
인스턴스에 컴포넌트 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의한다.
new Vue({
components: {
'컴포넌트 이름' : 컴포넌트 내용
}
});
지역 컴포넌트 등록 예제
<div id="app">
<button>지역 컴포넌트 등록</button>
<sample-local-component></sample-local-component>
</div>
<script>
var compo = {
// 컴포넌트 내용
template: '<div>지역 컴포넌트 등록 완료!</div>'
};
new Vue{{
el: '#app'
components: {
'sample-local-component': compo
}
});
</script>
댓글