[vue.js] 컴포넌트

# 컴포넌트 소개

- 컴포넌트 기반

- 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능

- 재사용성이 올라가고, 빠르게 화면 제작가능

- 컴포넌트간 관계가 생성

 

# 컴포넌트 등록 및 실습

# 전역 컴포넌트 등록법

# 지역 컴포넌트 등록법

<div id="app">

    <app-header></app-header>

    <app-footer></app-footer>

  </div>

  <div id="app2">

    <app-header></app-header> // 3.컴포넌트 사용법

    <app-footer></app-footer> // 5.컴포넌트 사용법

  </div>

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

  <script>

    // 2. 전역 컴포넌트 등록방법 (실제상황에서는 별로 안쓰임)

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

    Vue.component('app-header', {

      template: '<h1>Header</h1>'

    }); 

    // 1. 뷰 객체 생성

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

    new Vue({

      el: '#app',

      // 4. 지역 컴포넌트 등록 방식

     // components 속성

      components: {

        // '컴포넌트 이름': 컴포넌트 내용,

        'app-footer': {

          template: '<footer>footer</footer>'

        }

      },

    });

    new Vue({

      el: '#app2',

      components: {

        'app-footer': {

          template: '<footer>footer</footer>'

        }

      }

    })

  </script>

 

 

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

- 전역 컴포넌트는 플러그인이나 라이브러리 형태로만 사용됨 실제상에서는

 

# 컴포넌트와 인스턴스와의 관계

- 인스턴스를 여러개 생성할 수 있으나, 보통 하나만 생성한다. 그러면 Root가 두개 생성되고, el에 해당하는 태그가 Root이다.

- 전역 컴포넌트는 모든 인스턴스에 기본적으로 생성되어 있으므로, app-footer가 전역 컴포넌트로 생성되어 있으면, 아무Vue Root 상에서 별 설정없이 사용 가능