# 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(파스칼케이스)를 사용할 수 있는데
# 컴포넌트를 파스칼로 정했을때는 케밥, 파스칼로 호출할 수 있다.
# 케밥 이름 사용시 - 은 파스칼의 소문자->대문자로 바뀌는 부분에 명시해야 된다.
# 파일 이름 자체가 컴포넌트 이름이 되어
# AppleLemonList.vue 는 AppleLemonList 파스칼 케이스가 컴포넌트 이름이 된다.
# 그리고 위의 컴포넌트 name 필드값은 사용되지 않는다.
# 결국 다음과 같이 케밥 이름을 사용해야 된다.
return "apple-lemon-list";
# 참고로 다음과 같이 로컬 컴포넌트 이름을 별도로 정해서 사용할 수도 있다.
export default {
components: {
'aaa-bbb-ccc' : AppleLemonList
},
...