未知的自定义元素:<HamburgerMenu>-您是否正确注册了组件?

时间:2020-01-31 08:48:25

标签: vue.js

我正在尝试从我的父母HamburgerCross到我的孩子HamburgerMenu触发一个事件。但是,当我尝试使用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>

1 个答案:

答案 0 :(得分:0)

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

删除'hamburgerMenu',就可以了。就像您在评论中提到要与ref一起使用一样,它对ref毫无影响,就像短裙说的那样(如果您在组件上注册它的话)。