Vue.js再帰的メニューの問題

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内のメニューリストには次のエラーを与える：

[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);