Components
- Vue의 가장 강력한 기능 중 하나
- 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움이 됨
- 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타낼 수 있음
- Vue 컴포넌트는 Vue의 인스턴스(new Vue())이기도 함
- 그러므로 모든 옵션 객체(data, methods, computed, watch 등)를 사용할 수 있음(루트에만 사용하는 옵션 제외)
- 같은 라이프사이클 훅(created, mounted, updated, destroyed 등) 사용 가능
전역 등록
컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트(<my-component></my-component>) 로 사용할 수 있다.
루트 Vue 인스턴스를 인스턴스화 하기 전에 컴포넌트를 등록한다.
// 전역 컴포넌트 등록
Vue.component('my-component', {
template: '<div>사용자 정의 컴포넌트</div>',
// ... options ...
})<div id="example">
<my-component></my-component>
</div>// Vue 인스턴스 생성
new Vue({
el: '#example',
// ... options ...
})<!-- 결과 화면 -->
<div id="example">
<div>사용자 정의 컴포넌트</div>
</div>지역 등록
컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스∙컴포넌트의 범위에서만 사용할 수 있다.
동일한 캡슐화는 디렉티브와 같은, 다른 등록 가능한 Vue 기능에도 적용된다.
var Child = {
template: '<div>사용자 정의 컴포넌트</div>',
}
new Vue({
// ...
component: {
// <my-component>는 상위 템플릿에서만 사용 가능
'my-component': Child
}
})DOM 템플릿 구문 분석 경고
DOM을 템플릿으로 사용할 때, Vue는 템플릿 콘텐츠만 가져올 수 있기 때문에 HTML이 작동하는 방식에 고유한 몇 가지 제한 사항이 적용된다.
<ul>, <ol>, <table>, <selet> 와 같은 일부 엘리먼드는 그 안에 있을 수 있는 엘리먼트가 제한되어 있으며, <option>과 같이 다른 엘리먼트 안에만 나타날 수 있다.
<!-- 이슈 발생 -->
<table>
<my-row></my-row>
</table>
<!-- 이슈 해결 -->
<table>
<tr is="my-row"></tr>
</table>다음 소스 중 하나에 포함되면 이러한 제한 사항이 적용되지 않는다.
<script type="text/x-template">- JavaScript 인라인 템플릿 문자열
.vue컴포넌트(추천)
data는 반드시 함수
Vue 생성자에 사용할 수 있는 대부분의 옵션은 컴포넌트에서 사용할 수 있다.
단, data는 함수여야 한다.
// 이슈 발생 - 같은 data 객체를 공유
Vue.component('my-component', {
template: '<div>{{ message }}</div>',
data: {
message: 'hi :-)'
}
})
// 이슈 해결
Vue.component('my-component', {
template: '<div>{{ message }}</div>',
data() {
return {
message: 'hi :-)'
}
}
})동적 컴포넌트
같은 마운트 포인트를 사용하고 예약된 <component> 엘리먼트를 사용하여 여러 컴포넌트 간에 동적으로 트랜지션 하고 is 속성에 동적으로 바인드 할 수 있다.
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})<component v-bind:is="currentView">
<!-- vm.currentView가 변경되면 컴포넌트가 변경 -->
</component>원하는 경우 컴포넌트 객체에 직접 바인딩할 수도 있다.
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})Keep-alive
트랜지션 된 컴포넌트를 메모리에 유지(캐싱)하여 상태를 보존하거나 다시 렌더링 하지 않도록 하려면 동적 컴포넌트를 <keep-alive> 엘리먼트에 래핑 할 수 있습니다.
<keep-alive>
<component :is="currentView">
<!-- 비활성화 된 컴포넌트는 캐시됨 -->
</component>
</keep-alive>동적 컴포넌트를 감싸는 경우 <keep-alive>는 비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시한다.
<transition>과 비슷하게 <keep-alive>는 추상 엘리먼트이다. DOM 엘리먼트 자체는 렌더링 하지 않고 컴포넌트 부모 체인에는 나타나지 않는다.
<keep-alive><keep-alive>에 대한 자세한 내용은 API 참조를 확인한다.
