vue component 등록시 이름 에러

# vue 에서 컴포넌트 등록하기

# AppleLemonList 컴포넌트를 등록해서 사용하는 경우

# AppleLemonList.vue

export default {

  name: "applelemon-list",  // 사실 name 필드는 사용되지 않는다.

  components: {},

...

# MyComponent.vue

<template>

  <v-container fluid>

    <v-card>

      <component :is="currentComponent"></component>

    </v-card>

  </v-container>

</template>

import AppleLemonList from "@/components/AppleLemonList";

export default {

  name: "mycomponent",    // 사실 name 필드는 사용되지 않는다.

  components: {

    AppleLemonList

  },

  computed: {

    currentTabComponent: function() {

      return "applelemon-list"; // apple-lemon-list 이름을 사용해야 한다.

    }

  },

...

# 위 코드는 다음과 같은 에러가 발생한다.

vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: <applelemon-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

# 원인 및 해결방법

# 우선 컴포넌트 이름은 kebab(케밥케이스)와 pascal(파스칼케이스)를 사용할 수 있는데

# 컴포넌트를 파스칼로 정했을때는 케밥, 파스칼로 호출할 수 있다.

# https://kr.vuejs.org/v2/guide/components-registration.html#%EC%9D%B4%EB%A6%84-%ED%91%9C%EA%B8%B0%EB%B2%95

# 케밥 이름 사용시 - 은 파스칼의 소문자->대문자로 바뀌는 부분에 명시해야 된다.

# 파일 이름 자체가 컴포넌트 이름이 되어 

# AppleLemonList.vue 는 AppleLemonList 파스칼 케이스가 컴포넌트 이름이 된다.

# 그리고 위의 컴포넌트 name 필드값은 사용되지 않는다.

# 결국 다음과 같이 케밥 이름을 사용해야 된다.

return "apple-lemon-list";

# 참고로 다음과 같이 로컬 컴포넌트 이름을 별도로 정해서 사용할 수도 있다.

# https://kr.vuejs.org/v2/guide/components-registration.html#%EC%A7%80%EC%97%AD-%EB%93%B1%EB%A1%9D

export default {

  components: {

    'aaa-bbb-ccc' : AppleLemonList

  },

...