컴포넌트란?
컴포넌트란 조합하여 화면을 구성할 수 있는 블록입니다.
화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리합니다.
코드를 재사용하기 편리합니다.
컴포넌트 간의 관계는 자료구조의 트리(Tree)모양과 유사합니다.
지역 컴포넌트 vs 전역 컴포넌트
지역컴포넌트
특정 인스턴스에서만 유효한 범위를 갖습니다.
전역 컴포넌트
여러 인스턴스에서 공통으로 사용할 수 있습니다.
뷰로 접근 가능한 모든 범위에서 사용할 수 있습니다.
컴포넌트 등록하기
전역컴포넌트
Vue 변수를 이용하여 등록합니다.
Vue.component( )를 호출하여 수행합니다.
형식은 아래와 같습니다.
<body>
<h5>전역 컴포넌트 표시</h5>
<my-component></my-component>
</body>
<script>
// 전역 컴포넌트 등록
Vue.component('my-component',{
template : '<div>전역 컴포넌트가 등록되었습니다.!</div>'
});
</script>
전역 컴포넌트를 활용한 예시 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue component</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template : "<div>전역 컴포넌트가 등록되었습니다.</div>",
});
new Vue({
el:"#app",
});
</script>
</body>
</html>
지역 컴포넌트
인스턴스에 components속성을 추가합니다.
컴포넌트 이름, 내용 등록
형식은 아래와 같습니다.
<body>
<div id = "app">
<h3>지역 컴포넌트 표시</h3>
<local-component></local-component>
</body>
<script>
// 지역 컴포넌트 등록
var cmp = {
template : '<div> 지역 컴포넌트가 등록되었습니다.</div>'
}
new Vue({
el : "#app",
components : {
'local-component':cmp
}
});
</script>
지역 변수를 활용한 예제 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue component</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var cmp = {
// 컴포넌트 내용
template: '<div>지역 컴포넌트가 등록되었습니다.!</div>'
}
new Vue({
el:"#app",
components:{
'my-local-component' : cmp
}
});
</script>
</body>
</html>
전역 컴포넌트와 지역 컴포넌트 차이를 보기 위한 코드
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue component</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component>
<my-global-component></my-global-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
Vue.component('my-global-component',{
template : "<div>전역 컴포넌트가 등록되었습니다.</div>",
});
//지역 컴포넌트
var cmp = {
// 컴포넌트 내용
template: '<div>지역 컴포넌트가 등록되었습니다.!</div>'
}
new Vue({
el:"#app",
components:{
'my-local-component' : cmp
}
});
</script>
</body>
</html>
'WEB > Vue.js' 카테고리의 다른 글
| 004. 상 하위 컴포넌트 관계 (0) | 2019.11.21 |
|---|---|
| 002. Vue의 라이프 싸이클 (0) | 2019.11.21 |
| 001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념 (0) | 2019.11.21 |
| 000. Vue.js란? (1) | 2019.11.20 |
댓글