Vue - 在其他组件中使用组件

Question

我正在尝试在我的 home.vue search-bar component ，但我无法弄清楚为什么它不起作用。

文件夹结构

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>

这上面工作得很好。

首页.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 警告]：无效的组件名称：“_compiled”。组件名称只能包含字母数字字符和连字符，并且必须以字母开头。

[Vue 警告]：无效的组件名称：“__file”。组件名称只能包含字母数字字符和连字符，并且必须以字母开头。

[Vue 警告]：未知自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

在发现

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

原文由 user9389851 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下，您必须在 template 标签中将它与 kebab -case 一起使用。

以 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 兼容解决方案的编辑草案。谢谢！

原文由 Meet Zaveri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可能对你没有帮助，但我犯了一个愚蠢的错误：

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

export default {
  components: ServiceLineItem,
};

因为它应该是这样的：

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

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

原文由 Bedram Tamang 发布，翻译遵循 CC BY-SA 4.0 许可协议