如何在 Vue 中使用 kebab-case 命名组件？答案

【问题标题】：How can I use kebab-case for naming components in Vue?如何在 Vue 中使用 kebab-case 命名组件？
【发布时间】：2021-10-24 16:36:22
【问题描述】：

当我在模板内的标签上调用组件名称时，我想在组件名称上使用snake_case。我刚试过：

<script>
import footer-goodfooter from "@/comp/footer/c_footer.vue";
^^^^^^^^^^^^^^                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 'import ... =' can only be used in TypeScript files.Vetur(8002)

export default {
  name: 'App',
  components: {
    footer-goodfooter,
          ^
// ',' expected.Vetur(1005)
  },

但我希望我的组件（在本例中为 footer-goodfooter）在模板下方，如下所示：

<main>
   <header-bigheader />
   <content-fat-superfat-hallelujah />
   <footer-goodfooter />
</main>

我怎样才能做到这一点？谢谢。

【问题讨论】：

标签： javascript html vue.js kebab-case

【解决方案1】：

组件在Vue中是PascalCase，但在模板中可以通过kebab-case调用

<template>
  <footer-good-footer />
</template>

<script lang="ts">
import FooterGoodFooter from "@/comp/footer/c_footer.vue";

export default {
  name: 'App',
  components: {
    FooterGoodFooter, // OR 'custom-name': footerGoodFooter
  }
}
</script>

AFAIK 文件名在这里应该无关紧要。

见：https://vuejs.org/v2/guide/components-registration.html#Local-Registration

【讨论】：

【解决方案2】：

我真的不知道我是否理解你的问题。但是如果你想实现在你的模板中调用一个组件，比如：

<single-filter-container></single-filter-container>

...然后只需在 singleFilterContainer.vue 中进行导出，如下所示：

export default {
   name: "singleFilterContainer"
}

... 将此组件导入它的父级，例如：

import SingleFilterContainer from "@/components/singleFilterContainer";

... 并在您的模板中使用它，例如：

<single-filter-container></single-filter-container>

据我所知，这是一个正常的用例，因此不需要任何解决方法。推荐在 Vue.js 的Style Guide。请按照我提到的尝试并提供一些反馈，如果它不起作用。

如果是这样，我们可以检查您的某个模块是否有任何问题，或者您的 IDE 是否有一个插件可以为您自动完成。我正在使用 Vue 3 并使用 Vue.js 插件处理 IntelliJ 。

【讨论】：