Vue 3，"Failed to resolve component" 错误的原因是什么？

Question

我试图将一个组件包含到另一个组件中，但我在浏览器控制台中收到错误“无法解析组件：applications-overview-table”。

父组件“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},

这是 shorthand 个：

components: {
    ApplicationsOverviewTable : ApplicationsOverviewTable
 },

Vue 3，"Failed to resolve component" 错误的原因是什么？

Vue 3, what can be the cause of "Failed to resolve component" error?

vue.js

vue-component

vuejs3

vue-composition-api

vue-sfc