Vue 컴포넌트 분리하는 방법

컴포넌트는 Vue 오브젝트를 확장한 오브젝트이다. 확장이란 미리 Vue 오브젝트에 옵션을 정의해 이미 옵션이 정의된 Vue오브젝트를 생성하는 것을 의미함. 컴포넌트를 생성하면 확장된 Vue 인스턴스가 생성.

<div id="app">
  <date></date>
  <date></date>
  <date></date>
</div>
<script>
  Vue.Component('date',{
    template: '<div>{{ now }}</div>',
    data: function () {
      return {
        now: new Date()
      }
    }
  })
</script>

Vue.Component는 컴포넌트를 글로벌하게 등록하는 메서드

컴포넌트를 사용하면 공통적인 로직이나 템플릿을 엘리먼트를 통해 재활용할 수 있다.

주의할점! :  확장된 Vue 인스턴스, 즉 컴포넌트에서 data를 정의할 때 반드시 함수로 정의해야 한다.

컴포넌트 이름은 하이픈을 포함한 소문자이어야 한다.

 

로컬 컴포넌트 : Vue 인스턴스 혹은 컴포넌트의 옵션으로 등록해 해당 컴포넌트 내부에서만 사용하도록 지정 할 수 있다.

var dateComponent = {
  template: '<div>{{ now }}</div>',
  data: function () {
    return {
      now: new Date()
    }
  }
}
new Vue({
  el: '#app',
  components: {
  	date: dateComponent
  }
})

ul, ol, table, select같은 내부에 엘리먼트가 정해져있는 컴포넌트는 is 옵션을 사용해 렌더링해야함

 

템플릿 분리

<script type="text/x-template" id="todo-component">
  <div>
  	<p></p>
  </div>
</script>
<script>
  var todoComponent = {
    template: '#todo-component',
    data: function () {
      return {
        todos: [
          '열심히 일하기',
          '효도하기',
          '연애하기'
        ]
      }
    }
  };
  new Vue({
    el: '#app',
    components: {
      'todo-component' : todoComponent
    }
  })
</script>

<script type="text/x-template" id="todo-component"> 와 <template id="todo-component"> 같다