전역 컴포넌트, 지역 컴포넌트

Vue 컴포넌트

컴포넌트

컴포넌트란 뷰의 주요 특징인 컴포넌트는 html의 기본 엘리먼트 이외의 특정적인 태그명에 배치시키는 방법
컴포넌트를 잘 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능
또한 나중에 재사용하기가 훨씬 편리함

  <div id="new_component">
    <new-element></new-element>
  </div>

기본 엘리먼트가 아닌 new-element 라는 특정적인 이름의 태그!

Vue.component("new-element",{
  data : function(){
    return {
      msg : "헬로우 컴포넌트입니다."
    }
  },

  template : `<h3>{{msg}}</h3>`
});

뷰 인스턴스를 구성하며 지정된 위치("new-element")로 배정

new Vue({
  el : "#new_component"
});

뷰 인스턴스 생성

개발자도구 속성창을 보면 잘 출력이 된걸 볼 수 있음

 

전역 컴포넌트

전역 컴포넌트는 Vue.compoent() 로 등록
여러 인스턴스에서 공통으로 사용 가능

전역 컴포넌트 예제

  <div id="global_component1">
    <global-element></global-element>
  </div>
  <div id="global_component2">
    <global-element></global-element>
  </div>

둘 다 global-element를 배정

  <style>
    [id^="global_"] .red{
      /* id가 global 로 시작하는 애들 */
      color: red;
      font-weight: bold;
    }
  </style>

id가 global어쩌구의 red클래스 컬러를 빨간색으로!

    Vue.component("global-element", {
      template : `<div class="red">전역 컴포넌트로 등록되었음</div>`
    });
    new Vue({
      el : "#global_component1"
    });
    new Vue({
      el : "#global_component2"
    });

global-element에 뷰 컴포넌트를 구성하고
각각 생성

개발자도구 속성창을 보면 잘 구성이 되었음

 

지역 컴포넌트

지역 컴포넌트는 compoents로 등록
특정 인스턴스 내부에서만 사용 가능

 

  <div id="local_component">
    <local-el-01></local-el-01>
    <local-el-02></local-el-02>
  </div>

local-el-01과 local-el-02가 구성되어있음

    const showTxt1 = {
      template : "<div>지역 컴포넌트 등록1</div>"
    }
    const showTxt2 = {
      template : "<div>지역 컴포넌트 등록2</div>"
    }

템플릿 두개가 등록

    new Vue({
      el : "#local_component",
      components : {
        "local-el-01" : showTxt1,
        "local-el-02" : showTxt2,
      }
    });

템플릿들을 각각 맞는곳에 배정

 

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

- 각 컴포넌트의 역할(모듈화 개념)과 메모리 공간을 생성하는 것은 동일
- 전역 컴포넌트는 인스턴스 유효 범위에서 별도의 등록 없이도 문서 공간에 접근 가능
- 지역 컴포넌트는 인스턴스 유효 범위 내에서 선언이 되어야 한다.