728x90
반응형
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면 제작 가능
컴포넌트 등록 실습하기
// component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue.component('컴포넌트 이름', '컴포넌트 내용');
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
Vue.component('app-content', {
template: '<div>content</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>동작 확인
전역 컴포넌트 등록 실습하기
// component.html
// 전역 컴포넌트
// 실제 서비스 구현 시 전역 컴포넌트 구현할 일이 없다.
Vue.component('...', {
template: ...
});지역 컴포넌트 등록 실습하기
// component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
...
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
...
new Vue({
el: '#app',
// 지역 컴포넌트 등록 방식
components: {
// '컴포넌트 이름': '컴포넌트 내용'
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
</script>
</body>
</html>동작 확인
전역 컴포넌트와 지역 컴포넌트의 차이점
- 지역 컴포넌트는 특정 컴포넌트에서 사용할 것만 컴포넌트로 등록, 사용
- 전역 컴포넌트는 플러그인이나 라이브러리 같은 전역으로 사용해야하는 것만 전역 컴포넌트로 등록, 사용
컴포넌트와 인스턴스와의 관계
// component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
new Vue({
el: '#app',
// 지역 컴포넌트 등록 방식
components: {
// '컴포넌트 이름': '컴포넌트 내용'
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
new Vue({
el: '#app2'
});
</script>
</body>
</html>동작 확인
전역 컴포넌트는 인스턴스를 생성할 때마다 따로 등록할 필요 없지만, 지역 컴포넌트의 경우 인스턴스를 생성할 때마다 등록을 해줘야 한다.
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 통신 방법 - 응용 (0) | 2020.09.08 |
|---|---|
| [Vue.js] 컴포넌트 통신 방식 - 기본 (0) | 2020.09.07 |
| [Vue.js] 인스턴스 (0) | 2020.09.07 |
| [Vue.js] Vue와 Reactivity (0) | 2020.09.07 |
| [Vue.js] 강좌 소개 및 환경 설정 (0) | 2020.09.07 |
댓글