Vue 컴포넌트를 사용한 작성 방법

Components

• 컴포넌트 시스템은 독립적이며 재사용할 수 있는 컴포넌트들로 구성하여 대규모 앱을 구축할 수 있게 해주는 추상적 개념
• Vue에서 컴포넌트는 미리 정의된 옵션을 가지는 Vue 인스턴스
• 대규모 앱은 개발을 보다 쉽게 관리할 수 있도록 전체 앱을 컴포넌트로 나누는 것이 필수적

사용법

// todo-item 이름을 가진 컴포넌트 정의
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

<ol>
  <!-- todo-item 컴포넌트의 인스턴스 만들기 -->
  <todo-item></todo-item>
</ol>

전체 앱을 컴포넌트로 나눈 예시

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

props

• 부모 영역의 데이터를 자식 컴포넌트에 전달

사용법

<div id="app-7">
  <ol>
    <!--
      todo-item에 todo 객체 제공한다.
      각 항목의 컨텐츠는 동적으로 바뀔 수 있다.
      또한 각 구성 요소에 "key"를 제공해야 한다.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

Vue.component('todo-item', {
  // todo-item 컴포넌트는 "prop"이라고 하는 사용자 정의 속성 같은 것을 입력 받을 수 있다.
  // 이 prop은 todo라는 이름으로 정의되어있다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})