컴포넌트(component) : 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음
뷰에서는 내비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다
컴포넌트 등록하기
1. 지역(local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가짐
2. 전역(global) 컴포넌트는 여러 인스턴스에서 공통으로 사용 가능
전역 컴포넌트
Vue.component('컴포넌트 이름', {
//컴포넌트 내용
});- 컴포넌트 이름 : template 속성에서 사용한 HTML 사용자 정의 태그 이름을 의미
- 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있음
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<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>
Vue.component('my-component', {
template: '<div>전역 컴포넌트가 등록되었습니다</div>'
}); //전역 컴포넌트 등록
new Vue({
el: '#app'
});
</script>
</body>
</html>
인스턴스가 생성되고, 인스턴스 내용이 화면 요소로 변환될 때 컴포넌트 태그도 함께 변환된다
전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 {} 안에는 HTML 태그가 실제로 화면에서 그려질 때 표시될 내용(컴포넌트 내용)을 작성해야한다
지역 컴포넌트
인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다
new Vue({
components: {
'컴포넌트 이름' : 컴포넌트 내용
}
});컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의마하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변환될 때의 내용을 의미
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<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>
var cmp = {
template: '<div>지역 컴포넌트가 등록되었씀!</div>'
};
new Vue({
el: '#app',
components : {
'my-local-component' : cmp
}
});
</script>
</body>
</html>변수 cmp에 화면에 나타낼 컴포넌트 내용을 정의하였다
뷰 인스턴스에 componets 속성을 추가하고 컴포넌트 이름을 지정하고 컴포넌트 내용에는 앞서 지정한 변수 cmp를 지정하였다
지역 컴포넌트와 전역 컴포넌트의 차이
: 전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다.
지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해주어야 한다.
지역 컴포넌트와 전역 컴포넌트의 차이
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue sample</title>
</head>
<body>
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/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>
위 코드는 이런 결과가 나온다
여기에서 슬쩍 바꾸어서
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue sample</title>
</head>
<body>
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<hr>
<div id="app2">
<h3>두 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/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
}
});
new Vue({
el: '#app2'
});
</script>
</body>
</html>HTML 태그에 app2라는 태그를 하나 더 추가하고 인스턴스도 추가했다
app2 태그에 전역, 지역 컴포넌트를 모두 등록하였다.
결과를 보면 첫 번째 인스턴스 영역에는 전역, 지역 컴포넌트가 정상적으로 나타났지만, 두 번째 인스턴스 영역에서는 전역 컴포넌트만 있고, 지역 컴포넌트는 나타나지 않았다. -> 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문
그래서 두 번째 인스턴스 영역에서도 지역 컴포넌트가 있어야 한다면
new Vue({
el: '#app2',
components : {
'my-local-component' : cmp //지역 컴포넌트 등록
}
});이런 식으로 지역 컴포넌트에 따로 등록을 추가해주어야 한다!
'FrontEnd' 카테고리의 다른 글
| 뷰 템플릿 (0) | 2022.08.05 |
|---|---|
| Vue.js 뷰 HTTP 통신 (0) | 2022.07.28 |
| Vue.js 뷰 라우터 | 네스티드 뷰 | 네임드 뷰 (0) | 2022.07.28 |
| Vuejs 뷰 컴포넌트 통신 (0) | 2022.07.27 |
| Vue.js 기초 | 라이프사이클 (0) | 2022.07.25 |
