728x90
모든 예제 코드는 github에 있습니다.
3. 컴포넌트
컴포넌트 소개
- 화면의 영역을 구분하여 개발할 수 있는 기능
- 재사용성을 가장 큰 핵심
- 영역을 구분했을때 컴포넌트 간의 관계가 생긴다.
컴포넌트 등록
인스턴스를 생성하면 기본 Root컴포넌트가 된다.
전역 컴포넌트
전역적으로 사용할 수 있는 컴포넌트이다.
실제 서비스를 할때는 전역 컴포넌트를 쓸일이 거의 없다.
위에서 배운 컴포넌트 관계로써 app 하위에 app-Header와 app-content가 있다.
Vue.component('컴포넌트이름', 컴포넌트 내용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component</title>
</head>
<body>
<div id="app">
<app-Header></app-Header>
<app-content></app-content>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appHeader = Vue.component("app-header", {
template: "<h1>Header</h1>",
});
const appContent = Vue.component("app-content", {
template: "<div>content</div>",
});
const vm = new Vue({
el: "#app",
});
</script>
</html>지역 컴포넌트 등록
- 지역 컴포넌트에서 key값이 복수인 이유는 컴포넌트는 하나가 아니라 여러개인 경우가 많이 때문이다.(method도 동일한 이유)
components: { // 객체 리터럴 및 기호
'key' : 'value'
'컴포넌트이름' : 컴포넌트 내용
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component</title>
</head>
<body>
<div id="app">
<app-Header></app-Header>
<app-content></app-content>
<app-footer></app-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
const appHeader = Vue.component("app-header", {
template: "<h1>Header</h1>",
});
const appContent = Vue.component("app-content", {
template: "<div>content</div>",
});
const vm = new Vue({
el: "#app",
// 지역 컴포넌트
components: {
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
</script>
</html>전역 컴포넌트와 지역 컴포넌트의 차이점
- 전역 컴포넌트 vs 지역 컴포넌트
- 실제 서비스를 구현할때 대부분 플러그인이나 라이브러리 형태로 전역 컴포넌트를 사용한다.
- 일반적으로는 지역 컴포넌트를 사용한다.
- 스코프 차이가 있다.
컴포넌트와 인스턴스와의 관계
- 전역 컴포넌트는 모든 인스턴스에 등록되어 있지만, 지역 컴포넌트는 하나의 인스턴스에만 등록되어 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component2</title>
</head>
<body>
<div id="app1">
<!-- 전역 컴포넌트 -->
<app-header></app-header>
<!-- 지역 컴포넌트 -->
<app-footer></app-footer>
<div id="app2">
<!-- 전역 컴포넌트 -->
<app-header></app-header>
<!-- 지역컴포넌트(?) -->
<app-footer></app-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("app-header", {
template: "<h1>Header</h1>",
});
const vm1 = new Vue({
el: "#app1",
components: {
'app-footer': {
template: "<footer>footer</footer>",
},
},
});
const vm2 = new Vue({
el: "#app2",
});
</script>
</html>- 위와같이 지역 컴포넌트를 다른 인스턴스에서 사용하려고 하면 사용을 할 수 없다.
- 따라서 아래와 지역 컴포넌트를 각자 인스턴스에 맞게 구현해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component2</title>
</head>
<body>
<div id="app1">
<!-- 전역 컴포넌트 -->
<app-header></app-header>
<!-- 지역 컴포넌트 -->
<app-footer></app-footer>
</div>
<div id="app2">
<!-- 전역 컴포넌트 -->
<app-header></app-header>
<!-- 지역컴포넌트(?) -->
<app-footer></app-footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script>
Vue.component("app-header", {
template: "<h1>Header</h1>",
});
const vm1 = new Vue({
el: "#app1",
components: {
'app-footer': {
template: "<footer>footer</footer>",
},
},
});
const vm2 = new Vue({
el: "#app2",
components: {
'app-footer': {
template: '<footer>footer</footer>'
}
}x
});
</script>
</html>
728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 5. 컴포넌트 통신 방법 - 응용 (0) | 2020.07.05 |
|---|---|
| 4. 컴포넌트 통신 방법 - 기본 (0) | 2020.07.05 |
| 2. 인스턴스 (0) | 2020.07.05 |
| 1. Vue.js 소개 (0) | 2020.07.05 |
| 0. 개발환경설정 (0) | 2020.07.05 |
