Vue - 在一个组件中使用另一个组件

Question

我将尝试在我的home.vue组件中使用一个search-bar组件，但我无法弄清楚为什么它不起作用。 文件夹结构

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

App.vue

script

  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]: Invalid component name: "_compiled". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

[Vue warn]: Invalid component name: "__file". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

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

- user9389851

---

你在模板中漏掉了</section>标签吗？ - AirNoir

我已经编辑过了，只是在我的问题中漏掉了。 - user9389851

组件: { SearchBar } ? - AirNoir

你的项目中应该有一个 main.js 文件，其中指定了你使用的所有组件的名称。似乎 Vue 无法识别你想要使用的组件。应该像这样：Vue.component('app-searchbar', SearchBar);请参阅：https://vuejs.org/v2/guide/components-registration.html - Eugenio

现在这个已经可以正常工作了，谢谢。但是为了我自己的理解...我现在在 main.js 中导入了组件 import SearchBar from './components/common/SearchBar'， 然后使用Vue.component('app-search', SearchBar); 让它在全局注册。所以现在可以在 app.vue中删除 import 和 components: {} 了吗？ - user9389851

这个回答解决了你的问题吗？VueJs：在另一个组件中使用组件 - Arash.Zandi

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

---

这是 camelCase。这是 PascalCase。 - timbrown

Answer 2

Home.vue的脚本应该像下面这样：

import SearchBar from './common/SearchBar'

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

如果您的SearchBar组件已经有了一个名为SearchBar的属性值，则不需要使用'SearchBar'字段名。

- Kevin Law

Answer 3

也许对你有帮助，但我犯了一个愚蠢的错误: as

（可能或者不可能对你有所帮助，但是我犯了一个傻瓜错误：as）

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

export default {
  components: ServiceLineItem,
};

应该是这样的：

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

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

- Bedram Tamang