-1

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>

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

4

2 回答 2

2

组件PascalCase在 Vue 中，但在模板中可以通过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

于 2021-08-24T12:41:13.783 回答
0

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

<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和IntelliJ 使用 Vue.js 插件。

于 2021-08-24T12:52:49.630 回答