<컴포넌트>
화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면 제작이 가능
반복되는 코드가 많을 경우 사용
** 인스턴스를 생성하면 기본적으로 루트 컴포넌트가 된다
<컴포넌트 등록>
- Vue.compnent('컴포넌트이름', 컴포넌트 내용);
플러그인, 라이브러리 형태로 전역에 사용되는 경우에만 사용
template 속성을 사용
<전역 컴포넌트>
실제로는 전역으로 잘 사용하지 않음
플러그인이나 라이브러리 형태로 사용
- Vue.component()
<body>
<div id="app">
<app-header></app-header> //아래 정의한 컴포넌트 태그
</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'
});
</script>
</body>
<지역 컴포넌트>
- components 속성을 사용
- 인스턴스 생성시마다 컴포넌트를 등록해주어야 한다. 서비스 구현시 보통 인스턴스는 하나를 생성하고 components 속성을 붙혀나가는 형식으로 주로 사용
- 객체 내부에 키 : 값 형태로 정의한다.
- 컴포넌트 내용에 {} 객체를 열어서 정의
- 특정 컴포넌트 하단에 어떤 컴포넌트가 등록되었는지 components속성으로 바로 알 수 있음
- 1과 2는 같음
1)
new Vue({
el:'#app',
components:{
'컴포넌트 이름(키)':컴포넌트 내용(값),
'app-footer':{
template:'<footer>footer</footer>'
}
}
});2)
Vue.component('컴포넌트 이름', 컴포넌트 내용);
- 중복되는 코드를 component에 정의하고, 달라지는 부분을 props에 정의한다.
<div id="root">
<word-relay start-word="일이삼"></word-realy>
<word-relay start-word="사오육"></word-realy>
<word-relay start-word="칠팔구"></word-realy>
</div>* vue의 html 쪽에서는 케밥케이스로 정의(start-word)
Vue.component('word-relay',{
template: ,
props:['startWord],
data{},
methods{}
}* js 쪽에서는 케멀케이스로 받을 수 있다. (startWord)
vue가 알아서 처리해줌
'vue.js' 카테고리의 다른 글
| 컴포넌트 통신 - event emit (0) | 2023.01.11 |
|---|---|
| 컴포넌트 통신 - props (0) | 2023.01.10 |
| 뷰 인스턴스 (0) | 2023.01.10 |
| Reactivity (0) | 2023.01.10 |
| vscode플러그인 (0) | 2023.01.10 |
