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

이 글은 인프런에서 캡틴판교님의 강의를 듣고 본인이 복습차 작성한 글입니다.

지역 컴포넌트의 특징

특정 컴포넌트 하단에 components 아래에 어떤 컴포넌트들이 등록 되었는지 알 수 있다.
el 의 value 값에 특정 태그 식별자를 지정해줘야한다.

전역 컴포넌트의 특징

전역 컴포넌트는 실무에서 plugin, 라이브러리를 공통적, 전역적으로 사용할 때만 등록 한다.
태그의 명만 key 값으로 전달 해주면 된다.

비교 예시 코드

<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 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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',
            components: {
                'app-footer' : {
                    template : '<footer></footer>'
                }
            }
        });
    </script>

전역 컴포넌트 생성 방법

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

지역 컴포넌트 생성 방법

1. new Vue를 선언하여 뷰 객체 생성
2. el 를 키값으로 태그 명을 el value에 넣음
3. components를 생성하여 내용을 넣음