뷰 컴포넌트
컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미합니다.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있고, 나중에 코드를 다시 사용하기 수월해 집니다.
전역 컴포넌트 등록
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록합니다.
<html>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component> <!--전역 컴포넌트 표시-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('my-component', { // 전역 컴포넌트 등록
template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
지역 컴포넌트 등록
new Vue({
components: {
'컴포넌트 이름': 컴포넌트 내용,
}
});전역 컴포넌트 등록과는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의합니다.
<html>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component> <!--지역 컴포넌트 표시-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var cmp = { // 컴포넌트 내용
template: '<div>지역 컴포넌트가 등록되었습니다!</div>'
};
new Vue({
el: '#app',
components: {
'my-local-component': cmp
}
});
</script>
</body>
</html>
지역 컴포넌트와 전역 컴포넌트의 차이
<html>
<body>
<div id="app">
<my-global-component></my-global-component> <!--전역 컴포넌트 표시-->
<my-local-component></my-local-component> <!--지역 컴포넌트 표시-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/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>
전역과 지역 컴포넌트를 넣은 상태입니다.
지금 결과로만 봐서는 전역과 지역 컴포넌트의 차이를 이해하기 힘드실텐데,
다음 코드로 차이를 한번 알아봅시다.
<html>
<body>
<div id="app">
<my-global-component></my-global-component> <!--전역 컴포넌트 표시-->
<my-local-component></my-local-component> <!--지역 컴포넌트 표시-->
</div>
<hr>
<div id="app2">
<my-global-component></my-global-component> <!--전역 컴포넌트 표시-->
<my-local-component></my-local-component> <!--지역 컴포넌트 표시-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/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>
위와 같이 전역 컴포넌트는 두 인스턴스에 전부 출력이 되지만,
지역 컴포넌트는 id가 app인 인스턴스에만 등록하였으므로 지역컴포넌트는 한 곳만 출력이 되신것을 볼 수 있습니다.
'Vue.js' 카테고리의 다른 글
| [Vue.js] 입문 - 뷰 컴포넌트 통신 (0) | 2022.02.22 |
|---|---|
| [Vue.js] 입문 - 뷰 인스턴스 (0) | 2022.02.21 |
| [Vue.js] 입문 - 개발 환경 설정하기 (0) | 2022.02.18 |