Question

我正在尝试在Vue.js中构建一个递归菜单，但是我收到错误并且无法弄清楚什么是错误的。我有以下结构：

MenuList.vue

<template>
    <ul class="menu">
        <MenuLink v-for="menuItem in menuObject" :menuItem="menuItem" :key="menuItem.i"></MenuLink>
    </ul>
</template>

<script>
import MenuLink from './MenuLink'

export default {
  name: 'MenuList',
  components: {MenuLink},
  props: ['menuObject'],
  data () {
    return {
    }
  }
}
</script>

和MenuLink.vue

<template>
    <li>
        <a href="#">
            {{ menuItem.resourceKey }}
        </a>

        <MenuList :menuObject="menuItem.subMenuItems" v-if="menuItem.subMenuItems"></MenuList>
    </li>
</template>

<script>
  import MenuList from '@/components/common/menu/MenuList'

  export default {
    name: 'MenuLink',
    components: {MenuList},
    props: ['menuItem'],
    data () {
      return {
      }
    }
  }
</script>

但MenuLink内的MenuList会出现以下错误：

[Vue warn]: Unknown custom element: <MenuList> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
found in
---> <MenuLink> at src\components\common\menu\MenuLink.vue
       <MenuList> at src\components\common\menu\MenuList.vue

我无法弄清楚我做错了什么。有人有想法吗？

Answer 1

只需在app.js全局注册即可。例如。：

import MenuList from '@/components/common/menu/MenuList'
Vue.component('MenuList', MenuList);

Vue.js递归菜单问题

1 个答案: