Vue - 다른 컴포넌트 내부에서 컴포넌트 사용

Vue - 다른 컴포넌트 내부에서 컴포넌트 사용

를 사용하려고 합니다.search-bar component내 안에home.vue컴포넌트는 동작하지 않는 이유를 알 수 없습니다.

폴더 구조

App.vue
 components
   home.vue
   query.vue
   common
    HeaderBar.vue
    SideBar.vue
    SearchBar.vue

App.vue

대본

  import HeaderBar from './components/common/HeaderBar'
  import SideBar from './components/common/SideBar'

  export default {
    name: 'App',
    components: {
      HeaderBar,
      SideBar
   },

html

<template>
  <div id="app">
   <HeaderBar></HeaderBar>
   <SideBar></SideBar>
   <main class="view">
     <router-view></router-view>
   </main>
  </div>
</template>

위의 것은 문제없이 동작합니다.

Home.vue

대본

 import SearchBar from './common/SearchBar'

 export default {
   name: 'Home',
   components: SearchBar
 }

html

<template>
  <section class="home">
    <div class="hero-content">
      <h1>Hello World</h1>
      <SearchBar></SearchBar>
    </div>
  </section>
</template>

다음과 같은 오류가 발생합니다.

[Vue warn] :잘못된 구성 요소 이름: "_compiled"입니다.컴포넌트 이름에는 영숫자와 하이픈만 사용할 수 있으며 문자로 시작해야 합니다.

[Vue warn] :잘못된 구성 요소 이름: "_file"입니다.컴포넌트 이름에는 영숫자와 하이픈만 사용할 수 있으며 문자로 시작해야 합니다.

[Vue warn] :알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공해야 합니다.

에서 발견되다.

---> <Home> at src\components\Home.vue
       <App> at src\App.vue
         <Root>

기본적으로는 kebab-case와 함께 사용해야 합니다.template태그를 붙입니다.

컴포넌트를 PascalCase 표기로 등록합니다.kebab-case 표기의 컴포넌트에서 사용합니다.그렇게 간단해!

케이스 1: 디폴트

<template>
 <section class="home">
  <div class="hero-content">
   <h1>Hello World</h1>
  <search-bar></search-bar>
 </div>
 </section>
</template>
<script>
import SearchBar from './common/SearchBar'
export default{
 components: SearchBar
}
</script>

케이스 2: 커스터마이즈

또는 이 코드를 변경하기만 하면(커스텀명을 적용하여) 등록이 가능합니다.

export default{
 components: {
  'search-bar' : SearchBar 
 }
}

업데이트: 이 답변은 vue 버전 2.x와 관련하여 제공된 것입니다. vue 3.x에 대해 모르며 3.x 문서를 읽지 않았습니다.언제든지 vue 3.x 호환 솔루션에 대한 편집 초안을 제출할 수 있습니다.감사합니다!

홈의 스크립트vue는 다음과 같아야 합니다.

import SearchBar from './common/SearchBar'

export default {
   name: 'Home',
   components: {
       'SearchBar': SearchBar
   }
}

SearchBar 구성 요소에 이미 이름 속성 값 SearchBar가 있는 경우 'SearchBar' 파일 이름이 필요하지 않습니다.

도움이 안 될 수도 있지만 내가 바보 같은 실수를 했어

import ServiceLineItem from "@/Pages/Booking/ServiceLineItem";

export default {
  components: ServiceLineItem,
};

다음과 같이 해야 합니다.

import ServiceLineItem from "@/Pages/Booking/ServiceLineItem";

export default {
  components: {
    ServiceLineItem,
  },
};

언급URL : https://stackoverflow.com/questions/49873726/vue-using-component-inside-other-component