Question

我正在尝试从我的父母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>

Answer 1

<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毫无影响，就像短裙说的那样（如果您在组件上注册它的话）。

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

1 个答案: