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 내부 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 

I을 내가 뭘 잘못하고 있는지 알 수 없다. 누구나 아이디어가 있으십니까?

Answer 1

app.js에 전체적으로 등록하십시오. 예 :

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