Component란 화면을 구성할 수 있는 블록을 의미합니다.
Component를 구조화하여 여러 영역으로 쪼개서 사용할 수 있습니다.
하나의 사이트를 예로 들면 header,footer,content,aside등의 Component로 나눠서 사용이 가능합니다.
또한 Component는 전역과 지역 Component로 나눠져 있습니다.

전역 Component

<div id="app">
    <button>전역 컴포넌트 등록</button>
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    Vue.component('my-component',{
        template : '<div>전역 컴포넌트가 등록되었습니다!</div>'
    });

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

전역 Component는 Vue.component()를 호출하여 수행합니다.

지역 Component

지역 Component는 Instance에 components 속성을 추가하여 등록합니다.

<div id="app">
    <button>지역 컴포넌트 등록</button>
    <my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    var cmp = {
        tempalte : '<div>지역 컴포넌트가 등록되었습니다!</div>'
    }

    new Vue({
        el : '#app',
        components : {
            'my-local-component' : cmp
        }
    });
</script>

전역 Component와 지역 Component

<div id="app">
    <button>컴포넌트 등록</button>
    <my-global-component></my-global-component>
    <my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
<script>
    Vue.component('my-global-component',{
        template : '<div>전역 컴포넌트입니다.</div>'
    });

    var cmp = {
        tempalte : '<div>지역 컴포넌트입니다.</div>'
    }

    new Vue({
        el : '#app',
        components : {
            'my-local-component' : cmp
        }
    });
</script>