时间戳

首页 > 解决方案 > Vue.js 组件嵌入到另一个组件时不会出现

javascript - Vue.js 组件嵌入到另一个组件时不会出现

问题描述

我有一个标题、徽标、菜单和菜单项。

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

这些是组件：

应用程序.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>

我怎样才能让组件工作？

标签： javascripthtmlvue.jsvuejs2vue-component

解决方案

components 选项有一个对象作为值：

 components:{
        menuItem
    }

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

   name: "menu-item"

和 CamelCase 的文件名MenuItem

并像这样导入它：

  import MenuItem from "./MenuItem.vue";

然后像这样注册它：

 components:{
        MenuItem
    }

最后像这样使用它<menu-item ... />

推荐阅读