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

【问题标题】：Vue - Using component inside other componentVue - 在其他组件中使用组件
【发布时间】：2018-09-27 03:53:30
【问题描述】：

我试图在我的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>

上面的工作很好。

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 警告]：无效的组件名称：“_compiled”。组件名称可以仅包含字母数字字符和连字符，并且必须以用一封信。

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

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

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

【问题讨论】：

你错过了模板中的吗？
我编辑了它，只是在我的问题中错过了它。
组件：{ SearchBar } ?
您应该在项目中的某处有一个main.js，您可以在其中指定您正在使用的所有组件的名称。看起来 Vue 无法识别您要使用的组件。应该是这样的：Vue.component('app-searchbar', SearchBar); 见这里：vuejs.org/v2/guide/components-registration.html
现在可以正常工作了！谢谢。但是为了我的理解......我现在在 main.js import SearchBar from './components/common/SearchBar' 然后导入了组件 Vue.component('app-search', SearchBar); 。所以现在它在全球范围内注册了它，我可以在我的app.vue 中删除import 和components: {} ？

标签： javascript vue.js vuejs2 single-page-application vue-component

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

【讨论】：

已编辑答案 - 这是 camelCase。这是 PascalCase。

【解决方案2】：

Home.vue的脚本应该如下

import SearchBar from './common/SearchBar'

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

如果您的 SearchBar 组件已经有一个名称属性值 SearchBar，则不需要 'SearchBar' 文件名。

【讨论】：

【解决方案3】：

可能或可能不会帮助你，但我犯了一个愚蠢的错误：as

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

export default {
  components: ServiceLineItem,
};

应该是这样的：

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

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

【讨论】：