vue.js组件嵌入到另一个组件中时不显示

Question

我有一个标题，标志，菜单，和菜单项。

菜单项包含文本“这是一个菜单项”，但vue并没有对其进行处理和显示。

这些是组件:

App.Vue

<template>
  <div id="app">
    <mainHeader />
  </div>
</template>

<script>

import mainHeader from './components/mainHeader.vue'

export default {
  name: 'App',
  components: {
    mainHeader
  }
}
</script> 

<style>

html,body{

box-sizing: border-box;
margin:0px;
padding:0px;
}


#app{
background-color:gray;
}

</style>

。/components/mainheader.vue

<template>
    <div id="main-header">
        <logo />
        <mainMenu />
    </div>
</template>

<script>

import logo from "./logo.vue";
import mainMenu from "./mainMenu.vue";

export default
{
    name: 'mainHeader',
    components:
    {
        logo,
        mainMenu,
    }
}
</script>

。/components/mainmenu.vue

<template>
    <div id="main-menu">
        <menuItem />
    </div>
</template>


<script>

import menuItem from "./menuItem.vue";

export default
{
    name: "mainMenu",
    components:
    [
        menuItem
    ]
}
</script>

。/components/menuitem.vue

<template>
    <div class="menu-item">
        This is a menu item
    </div>
</template>

<script>

export default
{
    name: "menuItem"
}

</script>

当我检查DOM时，menuItem没有被解析为div，其中包含以下消息:

  <div id="app">
    <div data-v-ea6a1e94="" id="main-header">
      <div data-v-4b16403b="" data-v-ea6a1e94="" id="logo"></div>
      <div data-v-d2968a70="" data-v-ea6a1e94="" id="main-menu">
        <menuitem data-v-d2968a70=""></menuitem>
      </div>
    </div>
  </div>

如何使组件工作？

Answer 1

组件选项有一个对象作为值:

 components:{
        menuItem
    }

建议使用kebab-case命名组件:

   name: "menu-item"

文件名为CamelCase

并像这样导入它:

  import MenuItem from "./MenuItem.vue";

然后注册如下:

 components:{
        MenuItem
    }

最后使用类似 /code>的代码