컴포넌트

컴포넌트

https://ryuzuka.github.io/VUE/tutorial/07_component.html

• 컴포넌트

 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 된다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다.

 Vue 컴포넌트는 Vue 인스턴스이기도 하다. 그러므로 모든 옵션 객체를 사용할 수 있다. (루트에만 사용하는 옵션은 제외)

그리고 같은 라이프사이클 훅을 사용할 수 있다.

- Vue는 사용자 지정 태그 이름에 대해 W3C 규칙을 적용하지 않는다. ( 모두 소문자, 하이픈 포함. )
- 컴포넌트의data옵션은 반드시 함수형으로 정의한다. ( 컴포넌트 재 사용시 인스턴스가 같은 data객체를 공유하므로 새로운 데이터 객체를 반환. )

• 전역 컴포넌트

<div id="app">

<global-component></global-component>

</div>

<script>

Vue.component( 'global-component', {            // 컴포넌트 이름은 하이픈을 포함한 소문자여야 한다.

template: '<div>global-component</div>',

data: function () {                     // 컴포넌트 data를 정의할때 반드시 함수로 정의해야 한다.

return {}

}

});

new Vue({

el: '#app'

});

</script>

• 지역 컴포넌트

<div id="app">

<local-component></local-component>

</div>

<script>

new Vue({

el: '#app',

components: {

'local-component': {

template: '<div>local-component</div>',

data: function () {

return {}

}

}

}

});

</script>

• DOM 템플릿 구문 분석 경고

<ul>,<ol>,<table>과<select>와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으며,<option>과 같이 특정 다른 엘리먼트 안에만 나타날 수 있다. 해결 방법은 is 특수 속성을 사용.

<table>

<tr is="table-element"></tr>

</table>

• 템플릿 분리

<script type="text/x-template" id="template-component"></script>

<template id="template-component"></template>

new Vue({

components: {

'template-component': {

template: '#template-component'

}

}

});

• v-once

컴포넌트 템플릿의 루트 엘리먼트에 v-once 속성 추가

<div id="app">

<once-component></once-component>

</div>

<script>

Vue.component( 'once-component', {

template: '<div v-once><div>v-once: 컴포넌트 템플릿의 루트 엘리먼트에 v-once 속성 추가</div></div>' // v-once

});

new Vue({

el: '#app',

});

</script>