vue.js - 컴포넌트

컴포넌트란?

• 컴포넌트는 작고 그 자체로 제기능을 하며, 재사용할 수 있는 부품입니다.
• 거의 모든 어플리케이션 인터페이스는 컴포넌트 트리로 추상화 할 수 있습니다.

• Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue인스턴스 입니다.

컴포넌트 사용법

<div id="example">
  <my-component></my-component>
</div>
<script>
// 컴포넌트 생성
Vue.component('my-component', {
  //option
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})
// 루트 vue 인스턴스
new Vue({
  el: '#example'
})
</script>

• 컴포넌트 이름은 사용자 지정 엘리먼트와 다르게 이름 규칙(모두 소문자에 하이픈을 포함) 따르지는 않습니다.
• 하지만, Vue공식 사이트에서는 이 규칙을 따르는 것을 추천합니다.
• 전역 컴포넌트가 아닌, 컴포넌트를 인스턴스 옵션으로 등록하여 컴포넌트를 만들 수 있습니다.

var Child = {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
}
new Vue({
  // ...
  components: {
    'my-component': Child
  }
})

컴포넌트에서 DOM을 구성할 때 주의점

• DOM을 템플릿으로 사용할 때(el옵션을 사용하여 엘리먼트를 마운트하는 경우), HTML이 작동하는 방식때문에 몇가지 제한 사항이 적용됩니다.
• < ul >, < ol >, < table >, < select > 와 같이 일부 엘리먼트는 나타날 수 있는 엘리먼트 제한을 가지고 있어, 이러한 제한이 있는 경우 렌더링되지 않을 수 있습니다.
• 이러한 경우 is속성을 사용해서 렌더링할 수 있습니다.

<!-- my-row가 렌더링 되지 않습니다. -->
<table>
  <my-row>...</my-row>
</table>
<!-- tr태그에 is속성을 넣어 렌더링 합니다. -->
<table>
  <tr is="my-row"></tr>
</table>

data는 반드시 함수

• Vue 생성자에서 사용할 수 있는 대부분의 옵션은 컴포넌트에서 사용할 수 있습니다.
• 하지만, 한가지 data옵션의 경우 컴포넌트 인스턴스의 함수여야 합니다.
• 만약 data옵션이 함수가 아닌 경우 Vue는 실행을 중단하고 경고를 내보냅니다.
• 이 이유는 각 컴포넌트는 독립적으로 동작해야 하는데, 함수가 아닐 경우 하나의 컴포넌트 동작이 다른 컴포넌트 동작에 영향을 미칠 수 있기 때문입니다.

Vue컴포터트와 사용자 정의 엘리먼트

• 공식 사이트에서 Vue컴포넌트와 Web Components Spec의 사용자 지정 엘리먼트와 유사하다고 합니다.
• 따라서 Web Components의 Slot API와 is 툭수 속성을 가지고 있습니다.
• 여기에 차이점 2가지가 있습니다.
  1. Web Components Spec은 아직 초안이라 모든 브라우저에 동작하지 않지만, Vue는 Vue를 사용할 수 있는 브라우저에서는 일관되게 작동합니다. 그리고 필요하다면 Vue컴포넌트를 사용자 지정 엘리먼트에 래핑할 수 있습니다.
  2. Vue 컴포넌트는 사용자 지정 엘리먼트에서 사용할 수 없는 데이터 흐름, 이벤트 통신 등 중요한 기능을 제공할 수 있습니다.

ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.

참고

• https://vuejs.org/v2/guide/components.html