Vue.js - 컴포넌트

컴포넌트
화면의 영역을 구분하여 개발할 수 있는 뷰의 기능.
컴포넌트 기반으로 화면을 개발하면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.

전역 컴포넌트 생성 코드
모든 인스턴스 내에서 컴포넌트를 사용할 수 있다.
인스턴스마다 컴포넌트를 등록할 필요가 없다.

Vue.component('컴포넌트 이름', 컴포넌트 내용);

예시

<div id="app">
    /* 여기에 컴포넌트 이름을 태그로 넣어준다. */
    <app-header></app-header>
    <app-content></app-content>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    // 전역 컴포넌트 등록
    Vue.component('app-header', {
      template: '<h1>Header</h1>'
      // 컴포넌트가 표현되는 마크업이나 스타일
    });
    Vue.component('app-content', {
      template: '<div>content</div>'
    })

    // 인스턴스 등록
    // 인스턴스가 Root가 된다.
    new Vue({
      el: '#app',
    });
    
</script>

지역 컴포넌트 생성 코드
인스턴스의 components 속성을 사용하여 생성해준다.
해당 인스턴스 내에서만 컴포넌트를 사용할 수 있다.
대부분의 서비스는 이 방식으로 컴포넌트를 추가한다.

new Vue({
	el: '#app',
  	components: {
    	'컴포넌트 이름': 컴포넌트 내용,
    }
})

예시

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

결과

전역 컴포넌트와 지역 컴포넌트의 차이

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

<div id="app2">
  <app-header></app-header>
  <app-footer></app-footer>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

  // 전역 컴포넌트
  Vue.component('app-header', {
  template: '<h1>Header</h1>'
});

new Vue({
  el: '#app',
  // 지역 컴포넌트
  components: {
    'app-footer': {
      template: '<footer>footer</footer>'
    }
  }
});

// 새로운 인스턴스 생성
new Vue({
  // 다른 요소를 el로 지정해준다.
  el: '#app2'
})
</script>

결과

전역 컴포넌트인 app-header는 el이 #app2인 인스턴스에서도 나타나지만
지역 컴포넌트인 app-footer는 해당 el이 #app인 인스턴스에만 나타난다.