컴포넌트란, 조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미한다.
화면을 여러 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리한다.
- 컴포넌트 등록하기
컴포넌트 등록 방법에는 전역과 지역 두 가지가 있다.
전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있고 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖는다.
- 전역 컴포넌트 등록
형식은 다음과 같다.
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미한다.
컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.
전역 컴포넌트 등록 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Component Registration</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>
// 전역 컴포넌트 등록
Vue.component('my-component', {
template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>실제로는 컴포넌트 태그가 다음과 같이 변환된다.
- 지역 컴포넌트 등록
형식은 다음과 같다.
new Vue({
components: {
'컴포넌트 이름' : 컴포넌트 내용
}
});
지역 컴포넌트 등록 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Local Component Registration</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>
let cmp = {
template : '<div>지역 컴포넌트가 등록되었습니다!</div>'
};
new Vue({
el: '#app',
components: {
'my-local-component': cmp
}
});
</script>
</body>
</html>
- 지역 컴포넌트와 전역 컴포넌트의 차이
지역 컴포넌트와 전역 컴포넌트는 유효범위가 다르다.
전역 컴포넌트는 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있지만 지역 컴포넌트는 새 인스턴스를 생성할 때마다 따로 등록해줘야 사용할 수 있다.
출처 : Do it! Vue.js 입문
'Vue.js' 카테고리의 다른 글
| Vuex와 Helper 함수, 모듈화 (1) | 2023.01.13 |
|---|---|
| 03 인스턴스 & 컴포넌트 - 뷰 컴포넌트 통신 (0) | 2022.11.11 |
| 03 인스턴스 & 컴포넌트 - 뷰 인스턴스 (0) | 2022.11.11 |
| Data Binding (0) | 2022.11.03 |
| v-if, v-show 를 이용한 조건부 렌더링 (0) | 2022.11.03 |