Vue 컴포넌트란?
Vue 공식 문서에는 아래와 같이 정의 합니다.
- 컴포넌트는 Vue의 가장 강력한 기능 중 하나이다.
- 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 된다.
- 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트이다.
- 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다.
- Vue 컴포넌트는 Vue 인스턴스이기도 하다. 그러므로 모든 옵션 객체를 사용할 수 있다.
쉽게 말해 특정 HTML태그를 만들어 동적으로 해당 부분만 변화를 주어 브라우저에 나타낼 수 있게 도와주는 것입니다.
Vue 컴포넌트 사용방법
Vue 컴포넌트 사용 방법은 두 가지가 있습니다.
첫번째로는
# 전역 등록하여 사용하기,
두번째로는
# 지역 등록하여 사용하기 입니다.
1. 전역 등록
<body>
<div id="app">
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트
// Vue.component('컴포넌트 이름'. 컴포넌트 내용);
Vue.component('app-header', {
template : '<h1>Header</h1>'
});
new Vue({
el:'#app',
});
</script>
</body>
2. 지역 등록
<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>
전역등록과 지역등록의 차이점
전역등록과 지역등록은 전역변수, 지역변수와 똑같이 동작한다고 보시면 됩니다.
<div id="app">
<app-header></app-header>
<app-footer></app-footer>
</div>
<div id="app2">
<app-header></app-header>
<app-footer></app-footer>
</div> Vue.component('app-header', {
template : '<h1>Header</h1>'
});
new Vue({
el:'#app',
});
new Vue({
el:'#app2',
components : {
'app-footer' : {
template : '<footer>footer</footer>'
}
}
})
이처럼 사용한다면 아래와 같은 결과로 app2와 달리 app은 footer가 적용되지 않는 모습을 볼 수 있습니다.
Header ----- app 결과Header ----- app2 결과footer |
'Vue.js' 카테고리의 다른 글
| [Vue js] i18n 을 이용하여 다국어 설정 (0) | 2023.05.05 |
|---|---|
| [Vue js] Vue emit 부모 컴포넌트로 데이터 보내기 (0) | 2023.04.12 |
| [Vue js] Vue Props (0) | 2023.04.12 |
| [Vue] Vue methods 사용법 (1) | 2023.04.06 |
| [Vue js] Vue js 시작하기 (0) | 2023.04.05 |
