[Vue.js] Component

Component

재사용 할 수 있도록 도와주는 컴포넌트는 아래와 같이 등록할 수 있습니다.

    new Vue({
      el: '#app'
    });

이 경우 root로 등록됩니다. live server 플러그인으로 브라우저를 실행시켜 F12를 입력해 Vue 크롬 익스텐션을 통해 root로 등록된 것을 확인할 수 있습니다.
또다른 컴포넌트 등록방식은 Vue.component를 사용하는 것입니다. 이 방법을 전역 컴포넌트 방식이라고 합니다. 하지만 실무에서는 전역 컴포넌트를 잘 사용하진 않습니다. 대신 지역 컴포넌트를 사용합니다.

    Vue.component('app-header', {
      template: '<h1>Header</h1>'
    });
    Vue.component('app-content', {
      template: '<div>Content</div>'
    })

HTML 태그를 컴포넌트화 했다고 보시면 될 것 같습니다. 아래 코드는 HTML에서 컴포넌트를 활용한 코드입니다.

  <div id="app">
    <app-header></app-header>
    <app-content></app-content>
  </div>

지역 컴포넌트 등록방식은 key:value 형식의 Vue 인스턴스 생성자에 리터럴 형태입니다. 싱글 컴포넌트 속성으로 서비스에서 구현할 때 등록된 컴포넌트를 보여줄 수 있기 때문에 실무에선 지역 컴포넌트 방식을 주로 사용합니다.
그리고 전역 컴포넌트를 사용할 때는 Vue.component가 아닌 plug-in 형태로 import 해서 사용합니다. 전역 컴포넌트는 말그대로 다른 DOM 태그에서 사용이 가능하지만, 지역 컴포넌트는 재사용이 안되기 때문에 캡슐화를 하는 대신 재사용은 어려운 특징이 있습니다.

    new Vue({
      el: '#app',
      components: {
        'app-footer': {
          template: '<footer>footer</footer>'
        }
      }
    });

---

참고자료:

• 인프런 - 캡틴판교 Vue.js 시작하기