Vue - Utilisation d'un composant à l'intérieur d'un autre composant

Question

J'essaie d'utiliser un search-bar component dans mon home.vue composant mais je n'arrive pas à comprendre pourquoi cela ne fonctionne pas.

Structure des dossiers

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

App.vue

scénario

  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>

Cela fonctionne très bien ci-dessus.

Home.vue

scénario

 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>

Je reçois ces erreurs:

[Vue warn]: Nom de composant non valide: "_compiled". Les noms de composants ne peuvent contenir que des caractères alphanumériques et le trait d'union et doivent commencer par une lettre.

[Vue warn]: Nom de composant non valide: "__file". Les noms de composants ne peuvent contenir que des caractères alphanumériques et le trait d'union et doivent commencer par une lettre.

[Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

trouvé dans

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

Answer 1

Le script de Home.vue devrait être comme suit

import SearchBar from './common/SearchBar'

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

Si votre composant SearchBar a déjà une valeur de propriété de nom SearchBar, le nom de fichier 'SearchBar' peut être reduit.