Vue：不能在另一个组件内使用组件

Question

我正在尝试在另一个组件中使用子组件，但这不起作用。我一直试图解决这个问题，寻找拼写错误等已有好几个小时，但找不到任何东西。

Menu.vue

<template>
    <div class='navbar-and-alert'>
        <alert/>
        <nav class='navbar'>

        </nav>
    </div>

</template>

<script>


    import Alert from './Alert.vue'

    export default {
        name: 'Navbar',
        compontents: {
            Alert
        },
        data (){
            return {

            }
        },
    }

</script>

Alert.vue

<template>

    <section class='alert-section'>
        <p class='alert-section__content'>
            ...
        </p>
        <a href=''><img src='/static/assets/img/close.svg' class='alert-section__close-icon'></a>
    </section>

</template>

<script>

export default {
    name: 'Alert',
}

</script>

我在控制台中收到此警报：

Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。 在

中找到

警报组件在App.vue中使用时有效

Answer 1

components有错别字：

compontents: {
    Alert
},

应该是：

components: {
    Alert
},