无法解析同一文件夹中的组件Vue 3

Question

我正在使用 Vue 3 以及基于类的组件和 Typescript。如果我尝试在另一个组件中使用一个组件，则会收到此错误：

[Vue warn]: Failed to resolve component: Button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

此 Button 组件在其他地方工作没有问题。 这是我尝试使用 Button 并引发错误的组件：

<template>
    <form>
        <input type="email" />
        <Button text="Submit" />
    </form>
</template>

<script>
import { Vue, Options } from "vue-class-component";
import Button from "@/components/Button";

Options({
  components: {
    Button,
  },
});
export default class Registration extends Vue {}
</script>

我在视图 Status 内使用此 Registration 组件（只是另一个组件）。这是我的文件夹结构：

/src
--/components
----Button.vue
----Registration.vue
--/views
----Status.vue

我尝试在另一个组件中复制相同的错误，并且一切正常。看起来问题不在于组件的位置（同一文件夹）。

如果我尝试 console.log 组件 Button，控制台将显示该组件：

Object { props: {…}, components: {…}, extends: {}, methods: {}, computed: {}, setup: setup(props, ctx), render: render(_ctx, _cache, $props, $setup, $data, $options), __scopeId: "data-v-015de462", __file: "src/components/Button.vue", __hmrId: "015de462" }

但在模板中不会呈现。这就是渲染的内容：

<button text="Submit" data-v-5d567869=""></button>

我尝试使用其他组件代替 Button，但我得到了相同的结果。 我尝试使用 ./Button 而不是 @/components/Button 导入组件，但没有成功。

编辑：

正如 @jeremy-castelli 的评论所暗示的那样，我尝试重命名 CustomButton 中的 Button 组件。我还重命名了 CustomButton.vue 中的文件名。在模板中，我使用了 和 。错误保持不变。

我做错了什么？

Answer 1

很尴尬，但无论如何我都会把解决方案留在这里。让这次羞辱成为我的一个教训。

我的装饰器 Options({}) 缺少 @。

它应该是@Options({})。

:/