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

Posted 2023-02-22

【中文标题】如何在 Vue 中使用 kebab-case 命名组件？

【英文标题】：How can I use kebab-case for naming components in Vue?

【发布时间】：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>

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

【参考方案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 。