web-dev-qa-db-ja.com

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>
javascriptvue.jsvuejs2single-page-applicationvue-component
5
user9389851

Home.vueのスクリプトは次のようになります

import SearchBar from './common/SearchBar'

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

SearchBarコンポーネントにすでにnameプロパティ値SearchBarがある場合、'SearchBar'フィールド名は重複する可能性があります。

0
Kevin Law