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
 },