컴포넌트 등록
Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이다.
기본적으로 컴포넌트의 보이는 부분을 표시할 때에는 template을 이용해서 작성해주면 된다.
// todo-item 이름을 가진 컴포넌트를 정의
Vue.component('todo-item', {
template: '<li>할일 항목 하나입니다.</li>'
})
var app = new Vue(...)<ol>
<!-- todo-item 컴포넌트의 인스턴스 만들기 -->
<todo-item></todo-item>
</ol>
<body>
<div id="app">
<app-header></app-header> <!--인스턴스 생성-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
// 인스턴스 옵션
el: '#app',
components: {
// 컴포넌트 등록 - '컴포넌트 이름': 컴포넌트내용,
'app-header': {
template: '<h1>컴포넌트</h1>'
}
}
})
</script>
</body>
하지만 이러한 컴포넌트 등록은 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링할 뿐, 부모 영역의 데이터를 자식 컴포넌트에게 전달할 수 있어야 한다.
Props 전달
v-bind 를 사용하여 각각의 반복되는 컴포넌트를 전달할 수 있다.
v-bind:프롭스 속성이름="상위 컴포넌트의 데이터"<div id="app">
<app-header v-bind:title="str"></app-header>
</div>👉 "이 요소의 title 속성을 Vue 인스턴스의 str 속성으로 최신상태를 유지한다."는 의미
<body>
<div id="app">
<app-header v-bind:title="str"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({ // <Root>
// 인스턴스 옵션
el: '#app',
data: {
str: '프롭스 문자열'
},
components: {
'app-header': { // <AppHeader>
props: ['title'],
template: '<h1>{{ title }}</h1>'
}
}
})
</script>
</body>