Vue 3，“无法解析组件”错误的原因是什么？

Question

我试图将一个组件包含到另一个组件中，但在浏览器控制台中收到错误“无法解析组件：应用程序概述表”。

父组件“src/pages/ApplicationsOverview.vue”：

<template>
  <q-page class="flex flex-center">
    <applications-overview-table></applications-overview-table>
  </q-page>
</template>

<script>
import ApplicationsOverviewTable from '../components/application/OverviewTable.vue';

export default {
  name: 'ApplicationsOverviewPage',

  components: [ApplicationsOverviewTable],

  setup() {
    console.log('loading applications overview');

    return {};
  },
};
</script>

<style></style>

子组件“src/applications/OverviewTable.vue”：

<template>
  <div class="q-pa-md">
    <q-table title="Aanvragen" :rows="rows" :columns="columns" row-key="name" />
  </div>
</template>

<script>
const columns = [ ... ];
const rows = [ ... ];

export default {
  name: 'ApplicationsOverviewTable',
  setup() {
    return {
      columns,
      rows,
    };
  },
};
</script>

我可以看到正在加载父组件，因为控制台中显示了控制台消息“正在加载应用程序概述”。
我还可以看到路径OverviewTable.vue是正确的，因为如果我更改路径，则会出现另一个错误。

我尝试更改<applications-overview-table>为，<ApplicationsOverviewTable>但这给了我同样的错误（当然标签名称不同）。
我应该将模板中的 CamelCase 组件名称更改为 dash-case，不是吗？

我究竟做错了什么？

Answer 1

components选项有一个对象作为值而不是数组，它应该是：

components: {ApplicationsOverviewTable},

这是以下的简写：

components: {
    ApplicationsOverviewTable : ApplicationsOverviewTable
 },