Vue.js 未知的自定义元素：<；汉堡菜单>；-您是否正确注册了该组件？

我想从我的父母汉堡包到我的孩子汉堡包发起一场活动。但是当我尝试用hamburgerMenu注册我的组件时，它开始抛出错误。它说HamburgerMenu元素是未知的。我怎样才能解决这个问题

<template>
      <div>
            <div class="grid-item-4">
                <HamburgerCross @onToggle="toggleHamburgerMenu" />
                <HamburgerMenu :links="links" ref="hamburgerMenu" />
            </div>
      </div>
    </template>

    <script>

    import ButtonItem from '@/components/widgets/clickables/button_item.vue'
    import LanguageSelect from '@/components/widgets/language_select.vue'
    import HamburgerCross from '@/components/widgets/navigation/hamburger_menu_cross.vue'
    import HamburgerMenu from '@/components/widgets/navigation/hamburger_menu.vue'
    export default {
        components:{
            ButtonItem,
            LanguageSelect,
            HamburgerCross,
            'hamburgerMenu' : HamburgerMenu,
        },
        data(){
            return{
                title: 'BLOCKBURN',
                links: {'About' : '/about', 'Dapp' : '/dapp', 'Game' : '/game', 'Roadmap' : '/roadmap'},
                defaultLanguage: 'uk',
                buttonText: 'BUY BURN IEO',
                buttonTheme: 'secondary',
            }
        },
        methods:{
            toggleHamburgerMenu(){
                console.log('toggle nav');
                this.$refs.hamburgerMenu.toggle();
            }
        }
    }
    </script>

从“@/components/widgets/clickables/button_item.vue”导入ButtonItem
从“@/components/widgets/language_select.vue”导入LanguageSelect
从“@/components/widgets/navigation/hamburger_menu_cross.vue”导入HamburgerCross
从“@/components/widgets/navigation/hamburger_menu.vue”导入汉堡菜单
导出默认值{
组成部分：{
ButtonItem，
语言选择，
汉堡克罗斯，
“汉堡菜单”：汉堡菜单，
},
数据（）{
返回{
标题：“布洛克本”，
链接：{'About'：'/About'，Dapp'：'/Dapp'，Game'：'/Game'，Roadmap'：'/Roadmap'}，
defaultLanguage:'uk'，
ButtontText:“购买BURN IEO”，
buttonTheme:“次要”，
}
},
方法：{
切换汉堡菜单（）{
console.log（'toggle nav'）；
这是.refs.hamburgerMenu.toggle（）；
}
}
}

从“@/components/widgets/clickables/button_item.vue”导入ButtonItem
从“@/components/widgets/language_select.vue”导入LanguageSelect
从“@/components/widgets/navigation/hamburger_menu_cross.vue”导入HamburgerCross
从“@/components/widgets/navigation/hamburger_menu.vue”导入汉堡菜单
导出默认值{
组成部分：{
ButtonItem，
语言选择，
汉堡克罗斯，
汉堡曼努，
},
数据（）{
返回{
标题：“布洛克本”，
链接：{'About'：'/About'，Dapp'：'/Dapp'，Game'：'/Game'，Roadmap'：'/Roadmap'}，
defaultLanguage:'uk'，
ButtontText:“购买BURN IEO”，
buttonTheme:“次要”，
}
},
方法：{
切换汉堡菜单（）{
console.log（'toggle nav'）；
这是.refs.hamburgerMenu.toggle（）；
}
}
}

---

移除“汉堡菜单”，一切都会好起来的。正如您在评论中提到的，您希望将其与ref一起使用，如果您在组件上注册它，则不会对

ref

产生影响。

这不重要，但为什么您要使用

'hamburgerMenu'：hamburgerMenu

，而不仅仅是

hamburgerMenu

，就像其他人一样？为了进一步调试，我建议在日志

console.log（this.$options.components）

中添加一个

created

hook。这可能会让我们了解出了什么问题。因为我想在

组件

部分中使用小写首字母重新注册它，这不会对

参考

产生任何影响。实际上，我说过这不重要，但我错了。这就是问题的原因。去掉

'hamburgerMenu'：

部分，它应该可以正常工作。我不明白为什么切换hamburgerMenu不会被触发，我用这个$emit（“ontogle”，this.open）在父级中抛出偶数；是否在控制台中显示

切换导航

？

<template>
      <div>
            <div class="grid-item-4">
                <HamburgerCross @onToggle="toggleHamburgerMenu" />
                <HamburgerMenu :links="links" ref="hamburgerMenu" />
            </div>
      </div>
    </template>

    <script>

    import ButtonItem from '@/components/widgets/clickables/button_item.vue'
    import LanguageSelect from '@/components/widgets/language_select.vue'
    import HamburgerCross from '@/components/widgets/navigation/hamburger_menu_cross.vue'
    import HamburgerMenu from '@/components/widgets/navigation/hamburger_menu.vue'
    export default {
        components:{
            ButtonItem,
            LanguageSelect,
            HamburgerCross,
            HamburgerMenu,
        },
        data(){
            return{
                title: 'BLOCKBURN',
                links: {'About' : '/about', 'Dapp' : '/dapp', 'Game' : '/game', 'Roadmap' : '/roadmap'},
                defaultLanguage: 'uk',
                buttonText: 'BUY BURN IEO',
                buttonTheme: 'secondary',
            }
        },
        methods:{
            toggleHamburgerMenu(){
                console.log('toggle nav');
                this.$refs.hamburgerMenu.toggle();
            }
        }
    }
    </script>