Registration

컴포넌트 이름

컴포넌트를 등록할 때는 항상 이름을 지어줘야 한다.

이름 표기법

케밥-표기법

Vue.component('login-register', { /* ... */})

케밥-표기법으로 컴포넌트를 정의할 때는 케밥 표기법을 사용해야 한다.
파스칼 표기법

Vue.component('loginRegister', { /* ... */})

• 파스칼표기법은 두가지 모두 사용할 수 있다. 단 DOM에 바로 쓸 때는 케밥-표기법 이름만 가능한다.

Vue.component('shop', {
  props: ['cartCount'],
  template: '<h3>{{ cartCount }}</h3>'
});

<!-- HTML에서의 kebab-case 물론, 문자열 템플릿을 사용하는 경우에는 무관합니다. -->
<shop cart-count="hello!"></shop>

props로 파스칼케이스를 넘긴 경우, 컴포넌트 선언부에서는 케밥케이스로 넘겨야 정상 작동한다. (왜냐하면 브라우저는 대/소문자 구분이 없기 때문입니다.)

전역 등록

app.component()

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // the registered name
  'MyComponent',
  // the implementation
  {
    /* ... */
  }
)

vue 컴포넌트를 전역으로 사용하려면 app.component()를 사용한다.

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

<ComponentA/>
<ComponentB/>
<ComponentC/>

이렇게 등록한 컴포넌트들은 모두 하위 컴포넌트에서 사용가능한다. 즉 위의 3개 컴포넌트들은 각각의 컴포넌트안에서도 사용할 수 있다.

지역 등록

• 전역등록을 하게 되면 컴포넌트를 사용하지 않아도 최종 빌드에는 들어가 있어서, 사용자가 내려받아야 하는 자바스크립트의 양이 불필요하게 커진다.

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

• 자바스크립트 객체로 정의할 수 있다.
• 이렇게 하면 사용할 컴포넌트들만 components 옵션을 통해 쓸 수 있다.

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

components 객체의 각 속성에서 key는 커스텀 이름이 되고 value는 사용할 컴포넌트 객체를 지정한다.

지역 등록된 컴포넌트는 하위컴포넌트에서는 사용이 불가능한다.