VUE.JS
지역컴포넌트 - 전역컴포넌트 관련 정리
JUMP개발자
2020. 4. 19. 01:26
Vue는 기본적으로 컴포넌트를 조합하여 화면을 구성을 많이 한다.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능하고, 재사용이 가능하기 때문이다.
전역 컴포넌트는 아래와 같이 선언한다.
전역 컴포넌트는 선언하면 어디에서든지 사용이 가능하다. 마치 전역 변수 같은 개념이라고 할 수 있다.
|
1
2
3
4
|
// 전역 컴포넌트
// Vue.component('컴포넌트 이름', 컴포넌트 내용);
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
아래는 지역 컴포넌트 방식이다. id app이라는 div(el 이용)에서만 해당 컴포넌트가 사용될 수 있게 한다.
|
1
2
3
4
5
6
7
8
9
10
|
new Vue({
el: '#app',
// 지역 컴포넌트 등록 방식
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer': {
template: '<footer>footer</footer>'
}
},
});
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
아래와 같이 el : '#app2' Vue 인스턴스를 생성하면, <div id='app2'> </div> 에서는 app-footer 컴포넌트를 사용할 수 없다. (지역 컴포넌트이기 때문에), 반면 전역 컴포넌트('app-header')의 경우에는 app1, app2 어디에서나 사용 가능하다.
|
1
2
3
4
5
6
|
new Vue({
el: '#app2',
components: {
}
})
|
전역 컴포넌트 / 지역 컴포넌트 등록 방식 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-footer></app-footer>
</div>
<div id="app2">
<app-header></app-header>
<app-footer></app-footer>
</div>
<script>
// 전역 컴포넌트
// Vue.component('컴포넌트 이름', 컴포넌트 내용);
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
new Vue({
el: '#app',
// 지역 컴포넌트 등록 방식
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer': {
template: '<footer>footer</footer>'
}
},
});
new Vue({
el: '#app2',
components: {
}
})
</script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|