[basic] Vue Component

Brian·2021년 7월 17일

vuejs

Vuejs

목록 보기

3/7

Vue Component란?

컴포넌트는 화면의 영역을 구분하여 코드로 관리하는 것이다. Vuejs의 강력한 기능 중 하나이다. 컴포넌트 기반으로 화면을 개발하면 재사용성이 높아지고 화면 구성이 수월해진다.

Global Component vs Local Component

//global component 
Vue.component('app-header', {
      template: '<h1>Header</h1>'
    });

new Vue({
      el:'#app',
  //local component
      components: {
        //'key': 'value'
        //'컴포넌트 이름' : '컴포넌트 내용'
        'app-footer' : {
          template : '<footer>FOOTER</footer>'
        }
      },
    });

전역 컴포넌트는 component로 작성하고 지역 컴포넌트는 components 라고 작성한다. 지역 컴포넌트는 Vue 인스턴스 안에서 여러게 선언을 할 수 있기 때문에 component + s 복수형 이라고 생각하면 된다. component를 잘 작성한거 같은데 실행이 안된다면 지역 컴포넌트에 s를 붙여는지 확인 해보는걸 까막지 말자.

지역 컴포넌트로 작성했을 경우 한 눈에 작성한 내용들을 확인 할 수 있서 좋다. 업무에서 서비스를 구현 할때 한 눈에 파악 할 수 있는 components 속성으로 나열하는 방식을 선호 한다고 한다.

전역 컴포넌트는 플러그인이나 라이브러리 형태로 전역으로 사용해야 할 경우에 사용한다.

example

<body>
  <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('app-header', {
      template: '<h1>Header</h1>'
    });

    //지역 컴포넌트 - 많으 쓸것
    new Vue({
      el:'#app',
      components: {
        //'key': 'value'
        //'컴포넌트 이름' : '컴포넌트 내용'
        'app-footer' : {
          template : '<footer>FOOTER</footer>'
        }
      },
    });

    new Vue({
      el: '#app2'
    });
  </script>
</body>