Vue Component

Component

• Component는 literal로 만든 JavaScript 객체에요
• 화면의 일부분을 구현합니다.(HTML을 들고 있어요)
• component는 계층 구조를 가지고 있어요

component의 등록

1. Global component(전역 component)
2. Local component(지역 component)

---

Global componenet

여러 instance에서 공통적으로 사용이 가능합니다.

전역 component에 등록

Vue.component("my-component", {
        template: "<div>여기는 DIV 전역 컴포넌트입니다.</div>", // 이 컴퍼넌트가 가지고 있는 HTML을 명시합니다.
      }); 

new Vue({
        el: "#app",
        data: {
          myMsg: "너에게 전하는 메시지",
        },
      });

생성자 함수를 통해서 객체를 만들어요
이 객체는 component라는 property를 가져요
Vue.component() 이 특성을 이용해서 전역 component를 등록할 수 있습니다.

Local componenet

특정 instance 내에서만 유효한 component

let cmp = {
        template: "<div>여기는 DIV 로컬 컴포넌트입니다.</div>",
      }; // 로컬 컴포넌트는 인스턴스에 귀속됩니다.

      new Vue({
        el: "#app",
        data: {
          myMsg: "너에게 전하는 메시지",
        },
        components: { "my-local-cmp": cmp }, // 로컬 컴퍼넌트
      });

<div id="app">
      <button>컴포넌트 등록</button>
      <div>{{myMsg}}</div>
      <!-- 만들어둔 vue Global component 입니다.-->
      <!-- template에 있는 내용이 박혀요-->
      <my-component> </my-component>

      <!-- 만들어둔 vue Local component 입니다.-->
      <my-local-cmp> </my-local-cmp>
    </div>

    <div id="second">
      <!-- 전역 component가 나와요! 전역이니까 div id=second에서도 나올꺼에요-->
      <my-component> </my-component>

      <!-- 로컬 component는 안나올꺼에요 해당 객체에 귀속되니까-->
      <my-local-cmp> </my-local-cmp>
    </div>

---