Vue.js 러닝 가이드북

등록

Vue 컴포넌트로 등록하는 방법은 크게 2가지로 나눌 수 있습니다.

글로벌(Global) 등록

Vue.component 메서드에 컴포넌트 이름(문자 타입)과 인스턴스 옵션 객체를 전달하면 재사용 가능한 컴포넌트로 등록됩니다. 이 방법으로 등록된 컴포넌트는 글로벌 컴포넌트가 됩니다.










 

const componentOption = {
  template: `<div class="user-component"> ... </div>`,
  data: () => ({ ... }),
  created() { ... },
  computed: { ... },
  watch: { ... },
  methods: { ... }
};

Vue.component('UserComponent', componentOption);
1
2
3
4
5
6
7
8
9
10

로컬(Local) 등록

또 다른 방법은 Vue 인스턴스 옵션 components에 컴포넌트를 등록하는 것입니다. 이 방법으로 등록되면 로컬 컴포넌트가 됩니다.



 
 
 
 
 
 
 


new Vue({
  el: '#app',
  components: {
    UserComponent: {
      template: `...`,
      data: () => ({}),
      // ...
    }
  }
})
1
2
3
4
5
6
7
8
9
10

NOTE

v-once 디렉티브를 설정하면 정적 컴포넌트로 단 1회만 렌더링됩니다. 업데이트 하지 않아도 되는 엘리먼트들을 정적으로 랜더링 한다면 보다 나은 성능을 보일 수 있습니다.


 


Vue.component('UserComponent', {
  template: `<div v-once>...</div>`
});
1
2
3

다만, 이 패턴을 과도하게 사용하면 혼란을 야기할 수 있으니 사용에 주의가 필요합니다. 예를 들어 v-once 디렉티브에 익숙하지 않은 팀원은 컴포넌트가 업데이트 되지 않은 이유를 몰라 많은 시간을 디버깅에 소모할 수 있습니다.

Vue 파일 등록

Vue 파일은 재사용 가능한 컴포넌트 입니다. 즉, 컴포넌트 파일은 다른 컴포넌트 파일을 불러와 사용할 수 있습니다.

components/UserComponent.vue

<template>
  <div class="user-component">
    <!-- 템플릿 -->
  </div>
</template>

<script>
export default {
  name: 'UserComponent',
  // 인스턴스 옵션
}
</script>

<style scoped>
 /* 스타일 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

글로벌 컴포넌트로 등록하려면 main.js에 아래와 같이 코드를 작성합니다.

main.js


 


 

import Vue from 'vue';
import UserComponent from './components/UserComponent';

// 글로벌 컴포넌트 등록
Vue.component('user-component', UserComponent);
1
2
3
4
5

NOTE

여러 개의 컴포넌트를 일괄적으로 글로벌 등록하려면 다음과 같이 작성할 수 있습니다.

registerGlobalComponents.js







 

import Vue from 'vue';

import ComponentA from '@/components/componentA';
import ComponentB from '@/components/componentB';
import ComponentC from '@/components/componentC';

[ComponentA, ComponentB, ComponentC].forEach(c => Vue.component(c.name, c));
1
2
3
4
5
6
7

로컬 컴포넌트로 등록하려면 컴포넌트 파일에 아래와 같이 코드를 작성합니다.

App.vue


 


 



<script>
import UserComponent from './components/UserComponent';

export default {
  components: { UserComponent }
}
</script>
1
2
3
4
5
6
7

참고

보다 자세한 내용은 컴포넌트 등록 문서를 참고하세요.

← 사용 →