컴포넌트란?
컴포넌트란 조합하여 화면을 구성할 수 있는 블럭을 의미.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다.
컴포넌트 등록
지역(local)컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고 전역(Global)컴포넌트는 여러 인스턴스에서 공통으로 사용
전역 컴포넌트 등록 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
<!-- 전역 컴포넌트 표시 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>전역 컴포넌트가 등록됨</div>'
})
// 전역 컴포넌트 등록
new Vue({
el: '#app',
});
</script>
</body>
</html>
인스턴스가 생성되고, 인스턴스 내용이 화면요소로 변환될 때 컴포넌트 태그도 함께 변화된다.
컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 사용자가 볼 수 있는 형태의 화면요소로 최종 변환.
전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호{}안에는 HTML태그가 실제로 화면에서 그려질 때 표시될 내용을 작성해야 한다.
전역 컴포넌트가 생성되고 처리되는 과정은 다음과 같다.
뷰 라이브러리 파일 로딩
▼
뷰 생성자로 컴포넌트 등록
Vue.component()
▼
인스턴스 객체 생성
(옵션 속성 포함)
▼
특정 화면 요소에 인스턴스 부착
▼
인스턴스 내용 변환
(등록된 컴포넌트 내용도 변환)
▼
변환된 화면 요소를 사용자가 최종 확인
전역 컴포넌트 등록 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script type="text/javascript">
var cmp = {
// 컴포넌트 내용
template: '<div>지역 컴포넌트가 등록</div>'
}
new Vue({
el: '#app',
components:{
'my-local-component': cmp
}
});
</script>
</body>
</html>
지역 컴포넌트는 전역 컴포넌트와 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.
지역 컴포넌트 또한 template, data, methods 등의 인스턴스 속성을 작성할 수 있다
※ Do it Vue.js를 개인적인 공부를 위해서 정리 한것 입니다.
'JS 프레임워크 > Vue' 카테고리의 다른 글
| [Vue] Vue 라우트 (0) | 2021.04.06 |
|---|---|
| 뷰 컴포넌트 통신 (0) | 2021.04.01 |
| Vue 인스턴스 (0) | 2021.03.31 |
| Vue 환경설정 및 Hello world (0) | 2021.03.30 |
| Vue JS란 (0) | 2021.03.30 |
