[기초]#4 Vue의 컴포넌트란?

Vue.js

[기초]#4 Vue의 컴포넌트란?

dev.mk 2020. 6. 3. 19:48

컴포넌트 등록의 방법은 두 가지가 있다. 전역 컴포넌트, 지역 컴포넌트 두 가지로 용도에 따라 사용할 수 있다.

지역(Local) 컴포넌트는 정해진 특정 구역에서만 사용할 수 있는 컴포넌트이고, 전역(Global) 컴포넌트는 모든 인스턴스에서 공통으로 사용할 수 있는 컴포넌트이다.

전역 컴포넌트 등록

Vue.component('컴포넌트 명', {
  //컴포넌트 속성
});

Vue 라이브러리를 로딩하고 나면 Vue라는 전역 변수가 생성된다. 해당 변수에 전역 컴포넌트를 등록 할 수 있다.

모든 Vue 인스턴스에서는 해당 컴포넌트에 접근하여 사용할 수 있다.

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

등록한 my-component가 등록되었고 template이라는 속성을 가지고 있다. (template는 추후에 설명)

id가 app인 요소에 my-component를 사용하도록 선언하였고 전역에 등록되어있는 my-component의 template이 사용되었다.

크롬 브라우저에서 해당 화면에서 마우스 우클릭 후 소스 보기를 하면 아래와 같습니다.

지역 컴포넌트 등록

new Vue({
  components: {
    '컴포넌트 명': 컴포넌트 내용
  }
});

전역 컴포넌트와 마찬가지로 컴포넌트 명은 HTML에 작성할 사용자 정의 태그를 의미하고 컴포넌트 내용은 해당 컴포넌트의 속성을 정의한다.

전역 컴포넌트와 지역 컴포넌트가 사용방법만 다를 뿐 어떤 차이가 있는지 다른 예제로 확인하자.

이번에는 인스턴스를 2개를 생성했다. app, app2 두 인스턴스 모두 my-global-component, my-local-component를 인스턴스 유효 범위에서 사용하려 하고 있다. 하지만 app에서는 components에서 cmp를 등록하였고 app2에서는 등록하지 않았다. 모두 예상하는 대로 결과는 아래와 같다.

지역 컴포넌트는 인스턴스 속성의 components에 등록하지 않으면 사용할 수 없지만, 전역 컴포넌트는 모든 인스턴스에서 사용할 수 있다.

출처 http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553372

저작자표시