[Vue.js] Vue 컴포넌트

컴포넌트 (Component)

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

Vue 인스턴스를 생성하면 개발자 도구에서 root 컴포넌트로 인식한다.

컴포넌트 등록 방법 2 가지

✨ 전역 컴포넌트 등록

여러 인스턴스에서 공통으로 사용 가능하다

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

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

 // ...

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

✨ 지역 컴포넌트 등록

특정 인스턴스에서만 사용 가능하다.

components: {
    '컴포넌트 이름' : 컴포넌트 내용
    }

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

    // ... 

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

개발자 도구를 열어서 확인해보면, Root 컴포넌트 밑에 AppHeader, AppFooter 컴포넌트가 속해있다.