1

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

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

我究竟做错了什么？

4

1 回答 1

7

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

components: {ApplicationsOverviewTable},

这是的简写：

components: {
    ApplicationsOverviewTable : ApplicationsOverviewTable
 },
于 2021-03-11T11:07:49.387 回答