고정 헤더 영역
상세 컨텐츠
본문
컴포넌트 : 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)
😀 1. 전역 컴포넌트 등록하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
<script>
Vue.component('my-component', { <!-- 뷰 생성자로 컴포넌트 등록-->
template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
😀😀 2. 지역 컴포넌트 등록하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>컴포넌트 등록</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
<script>
var cmp = {
template: '<div>지역 컴포넌트가 등록되었습니다</div>'
}
new Vue({
el: '#app',
components: {
'my-local-component' : cmp
}
})
</script>
</body>
</html>
😀😀😀 3. 인스턴스 유효범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 확인하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Component Registration</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.7.13/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>
첫번째 영역에서는 전역, 지역 컴포넌트가 모두 정상적으로 나타났지만 구분선 밑 두번째 인스턴스 영역에는 전역 컴포넌트만 나타나고 지역 컴포넌트는 나타나지 않았다.
전역 컴포넌트와 지역 컴포넌트의 유효범위가 다르기 때문이다.
전역 컴포넌트는 인스턴스를 생성할 때마다 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있다.
반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야 한다.
