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

问题描述

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

父组件“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 是正确的，不是吗？

我做错了什么？

解决方法

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

components: {ApplicationsOverviewTable},

这是 :

的简写

components: {
    ApplicationsOverviewTable : ApplicationsOverviewTable
 },