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

Question

我正在尝试在另一个组合中使用子强制，但它不起作用。几个小时以来，我一直在尝试解决此问题，寻找拼写错误等，但找不到任何东西。

菜单.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 警告]：未知的自定义元素： - 你是否正确注册了组件？对于递归组件，请确保提供"name"选项。 发现于

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

Answer 1

>components有一个拼写错误：

compontents: {
Alert
},

应该是：

components: {
Alert
},