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

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>

AFAIK 文件名在這里應該無關緊要。

見： https ://v2.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 的樣式指南中推薦。 請按照我提到的嘗試並提供一些反饋，如果它不起作用。

如果是這樣，我們可以檢查您的某個模塊是否有任何問題，或者您的 IDE 是否有一個插件可以為您自動完成。 我正在使用Vue 3並使用 Vue.js 插件在IntelliJ上工作。