[Vue]전역 인스턴스와 지역 인스턴스

티스토리 뷰

Front

[Vue]전역 인스턴스와 지역 인스턴스

1223gogo 2023. 6. 11. 22:28

컴포넌트란?

컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다.

화면의 영역을 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리합니다.

Root

/ | \

Header Content Footer

/ \

Aside List

위와 같이컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사합니다.

이러한 컴포넌트를 등록하는 방법은 전역과 지역의 두 가지가 있습니다.

전역 컴포넌트(Global)

- 여러 인스턴스에서 공통으로 사용할 수 있습니다.

<htlml>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            <global-component></global-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        
        <script>
            //전역 컴포넌트 등록
            Vue.component('global-component', {
                template: '<div>전역 컴포넌트다!</div>'
            });
            
            //뷰 인스턴스 생성
            new Vue({
                el: '#app'
            });
            
        </script>
    </body>
</htlml>

지역 컴포넌트(Local)

- 특정 인스턴스에서만 유효한 범위를 갖습니다.

<htlml>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            <local-component></local-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        
        <script>
            //변수 선언
            var cmp = {
                template: '<h1>지역 컴포넌트다!</h1>'
            };
            
            //뷰 인스턴스 생성
            new Vue({
                el: '#app',
                components: {
                    'local-component' : cmp
                }
            });
            
        </script>
    </body>
</htlml>

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

<htlml>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            <h1>{{ message }}</h1>
            <go-component></go-component>
            <local-go-component></local-go-component>
        </div>
        
        <hr>

        <div id="app2">
            <h1>{{ message }}</h1>
            <go-component></go-component>
            <local-go-component></local-go-component>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        
        <script>
            //전역 컴포넌트 등록
            Vue.component('go-component', {
                template: '<div>전역 컴포넌트다!</div>'
            });
            //지역 컴포넌트 내용
            var cmp = {
                template : '<div>LOCAL 로컬 컴포넌트다!</div>'
            };
            //첫번째 인스턴스 생성
            new Vue({
                el: '#app',
                data : {
                    message : '첫번째 인스턴스 영역'
                },
                components: {
                    'local-go-component' : cmp
                }
            });
            //두번째 인스턴스 생성
            new Vue({
                el: '#app2',
                data : {
                    message : '두번째 인스턴스 영역'
                },
            });
        </script>
    </body>
</htlml>

위의 결과에서 보면 두번째 인스턴스 영역의 지역 컴포넌트가 인식되지 않았음을 확인할 수 있습니다.

오른쪽 개발자도구에서는 관련 오류내용도 확인할 수 있습니다.

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 componets 속성으로 등록할 필요가 없습니다. 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있습니다.

반면, 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해 줘야합니다.

http://www.yes24.com/Product/Goods/58206961

Do it! Vue.js 입문 - YES24

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j

www.yes24.com

'Front' 카테고리의 다른 글

[Vue.js]뷰 라우터 (0)	2023.07.31
[Vue.js] 뷰 컴포넌트 통신 (0)	2023.07.09
[Vue]뷰 인스턴스 생성 (0)	2023.05.22
[Vue]맥북 Vue 실습 환경설정 하기 (0)	2023.04.06

공지사항

CodingGoGo

티스토리 뷰