728x90
반응형
컴포넌트(component)란 조합하여 화면을 구성할 수 있는 블록을 의미
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있음. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리함.
컴포넌트 등록하기
- 전역(Global) : 여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트
- 지역(Local) : 특정 인스턴스에만 유효한 범위를 갖음
전역 컴포넌트 등록
라이브러리 로딩 후 Vue 변수를 이용하여 등록
Vue.component("컴포넌트 이름", {
// 컴포넌트 내용
});컴포넌트 이름
⇒ template 속성에서 사용할 HTML 사용자 정의 태그(custom tag)
컴포넌트 내용
⇒ 컴포넌트 태그가 실제 화면의 HTML요소로 변환할 때 표시될 속성들을 컴포넌트 내용에 작성 (template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
Vue.component("my-component", {
template : "<div>전역 컴포넌트가 등록되었습니다.</div>"
});
new Vue({
el : "#app"
})
</script>
</body>
</html>- 뷰 라이브러리 파일 로딩
- 뷰 생성자로 컴포넌트 등록 Vue.component()
- 인스턴스 객체 생성
- 특정 화면 요소에 인스턴스 부착
- 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환)
- 변환된 화면 요소를 사용자가 최종 확인
지역 컴포넌트 등록
인스턴스에 components속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의
new Vue({
components : {
"컴포넌트 이름" : 컴포넌트 내용
}
});<!DOCTYPE html>
<html lang="en">
<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://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
var cmp = {
template : "<div>지역 컴포넌트가 등록되었습니다.</div>"
};
new Vue({
el : "#app",
components : {
"my-local-component" : cmp
}
})
</script>
</body>
</html>지역 컴포넌트와 전역 컴포넌트의 차이
유효범위의 차이
<div id="app">
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<div id="app2">
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script>
Vue.component("my-component", {
template : "<div>전역 컴포넌트가 등록되었습니다.</div>"
});
var cmp = {
template : "<div>지역 컴포넌트가 등록되었습니다.</div>"
};
new Vue({
el : "#app",
components : {
"my-local-component" : cmp
}
});
new Vue({
el : "#app2",
})
</script>app2영역에서는 local compnent를 찾을 수 없다.
728x90
반응형
'프로그래밍 노트 > Vue' 카테고리의 다른 글
| Vuex란? (0) | 2019.10.17 |
|---|---|
| 뷰(Vue) 라우터(Router) (0) | 2019.09.30 |
| 뷰(Vue) 컴포넌트(Component) 통신 (0) | 2019.09.30 |
| 뷰 라이프사이클 (Vue lifecycle) (1) | 2019.09.23 |
| 뷰(Vue) 인스턴스 (0) | 2019.09.23 |
