뷰 컴포넌트

뷰 컴포넌트

• 화면 영역을 구분하여 개발(헤더, 네비, 콘텐츠, 푸터...)
• 코드의 재사용을 위함(코드 반복을 줄여서 여러 화면에 사용)

<div id="app"></div>

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

• 뷰 인스턴스를 생성하면 기본적으로 <Root> 컴포넌트가 생성된다.

전역 컴포넌트

• 전역 컴포넌트는 component('컴포넌트이름', 컴포넌트내용)으로 만들수 있다.
• #app(Root 컴포넌트) 안에서 <컴포넌트이름> 태그로 사용할 수 있다.
• 여러 인스턴스에서 공통으로 사용하며 위치에 상관없이 어디서든 호출할 수 있다.
• 전역으로 사용해야하는 플러그인이나 라이브러리만 사용한다.
• 최초 빌드시에 같이 빌드되기에 무거워질 수 있다.

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

<script>
  Vue.component('app-header', {
    template: '<h1>Header</h1>'
  })

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

 

지역 컴포넌트

• 생성자에 components: {  '컴포넌트이름': 컴포넌트 내용 }을 추가한다.
• 컴포넌트 사용 시에 주로 지역 컴포넌트를 사용하는데 이유는 특정 화면에 속성을 더해가며 사용하기에 컴포넌트 구조를 한눈에 파악하기 쉽기 때문이다.

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

<script>
  new Vue({
    el: '#app',
    components: {
      'app-header': {
        <h1>header</h1>
      }
    }
  });
<script>