Question

我正在尝试在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警告]：组件名称无效：“_compiled”。组件名称可以   只包含字母数字字符和连字符，必须启动   一封信。

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

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

在
中找到
---> <Home> at src\components\Home.vue
       <App> at src\App.vue
         <Root>

Answer 1

默认情况下，您必须将其与template标记中的 kebab-case 一起使用。

从 CamelCase 表示法注册组件。在具有 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 
 }
}

Answer 2

Home.vue 的脚本应该如下

import SearchBar from './common/SearchBar'

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

如果您的SearchBar组件已具有名称属性值 SearchBar ，则＆＃39; SearchBar＆＃39; 字段名称可能是还原的。

Answer 3

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

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

export default {
  components: ServiceLineItem,
};

应该是这样的：

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

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

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

3 个答案: