[Vue.js] Vue 컴포넌트와 인스턴스
- 웹 개발/Vue.js
- 2019. 9. 15. 02:03
컴포넌트
- 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)
- 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능해진다.
- 패턴이 있으므로 남이 작성한 코드도 보기 편해진다.
컴포넌트 등록
- 전역 컴포넌트와 지역 컴포넌트로 나뉨
- 지역(local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가짐
- 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용 가능
전역컴포넌트
<!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.5.2/dist/vue.js"></script>
<script>
Vue.component('my-component',{
template : '<div>전역 컴포넌트가 등록되었습니다!</div>'
});
new Vue({
el:'#app'
});
</script>
</body>
</html>- Vue.component('컴포넌트 이름', { // 컴포넌트 내용 };
- 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미함.
- 뷰 생성자로 컴포넌트 등록 -> 인스턴스 객체 생성 -> 특정 화면 요소에 인스턴스 부착 순서로 진행됨.
- my-component라는 태그가 <div>전역 컴포넌트가 등록되었습니다!</div> 로 치환되는 것!
지역컴포넌트
- 뷰 인스턴스에 components 속성을 추가하여 등록할 수 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue Component Registration</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에 화면에 나타낼 컴포넌트의 내용을 정의함.(실제로 data,methods 등 여러 속성이 들어갈 수 있음)
- <my-local-component></my-local-component> 태그가 cmp 변수의 template 속성의 값으로 치환됨!
- 지역컴포넌트이기 때문에 <div id="app"> 태그 안에서만 사용 가능함.
- 그렇기 때문에 다른 스코프(유효범위)에서 사용하기 위해서는 지역컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야함.
'웹 개발 > Vue.js' 카테고리의 다른 글
| [Vue.js] ESLint 화면 에러 오버레이 처리하기 (0) | 2020.05.29 |
|---|---|
| [Vue.js] 뷰 인스턴스에서의 this 키워드(data) (0) | 2020.03.07 |
| [Vue.js] 뷰 모델의 Reactivity 구현(Databinding에 관하여) (0) | 2020.03.04 |
| [Vue.js] Vue 컴포넌트간의 통신! (1) | 2019.09.15 |
| [Vue.js] 뷰 초 기본예제 Hello World 찍기, Vue.js Life Cycle 예제 (0) | 2019.09.12 |