1. 컴포넌트 소개

화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태 로 관리하는 것이 컴포넌트입니다.

Vue는 재사용이 가능한 컴포넌트로 웹 페이지를 구성할 수 있습니다.

확장자가 .vue인 단일 파일에 HTML, 자바스크립트, CSS 코드로 구성하여 사용합니다.

출처 : https://wikidocs.net/17701#_1

2. 컴포넌트 등록 실습

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

1) 전역 컴포넌트 등록

실무에서 전역 컴포넌트는 거의 쓰이지 않지만 일단 이해를 위해 학습합니다.

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

<script>
    // 전역 컴포넌트
    // Vue.component('컴포넌트 이름', '컴포넌트 내용');
    Vue.component('app-header', {
        template: '<h1>Header</h1>'
    });
    Vue.component('app-content', {
        template: '<div>Content</div>'
    });
        
    new Vue({
        el: '#app'
    });
</script>

2) 지역 컴포넌트 등록

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

<script>
    new Vue({
        el: '#app',
        components: {
            // 지역 컴포넌트 등록 방식
            //'키': '값'
            //'컴포넌트 이름': 컴포넌트 내용
            'app-footer': {
                template: '<footer>footer</footer>'
            }
        }
    });
</script>

3. 컴포넌트와 인스턴스와의 관계

새로운 인스턴스를 하나 생성한다.

    <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>
        // 전역 컴포넌트
        // Vue.component('컴포넌트 이름', '컴포넌트 내용');
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });
    
        new Vue({
            el: '#app',
            components: {
                // 지역 컴포넌트 등록 방식
                //'키': '값'
                //'컴포넌트 이름': 컴포넌트 내용
                'app-footer': {
                    template: '<footer>footer</footer>'
                }
            }
        });

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

전역 컴포넌트는 바로 등록 되지만
지역 컴포넌트는 인스턴스를 생성할 때 마다 코드를 작성해서 등록해야 합니다.