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

Question

当我在模板中的标签上调用组件名称时，我想在组件名称上使用 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>

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

Answer 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>

据我所知，文件名在这里无关紧要。

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

Answer 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 。

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

How can I use kebab-case for naming components in Vue?

html

javascript

vue.js

kebab-case