Vue中如何在模板内使用kebab-case格式命名并调用组件

报错原因 #

你遇到的语法报错是因为JavaScript变量命名规则不允许包含中划线（-），直接在import导入语句和components注册字段中写footer-goodfooter属于非法JS语法，和Vue本身无关。

实现方法 #

Vue原生支持模板中使用kebab-case格式调用组件，你可以从以下两种方案中选一种实现：

方案1：依赖Vue自动命名转换（推荐）

Vue内置了组件名自动转换能力，注册组件时使用驼峰命名，模板中可以直接等价使用kebab-case格式调用：

<script>
// 导入时使用合法的驼峰格式变量名
import FooterGoodfooter from "@/comp/footer/c_footer.vue";
import HeaderBigheader from "@/comp/header/xxx.vue";
import ContentFatSuperfatHallelujah from "@/comp/content/xxx.vue";

export default {
  name: 'App',
  components: {
    // 注册时直接使用驼峰变量名即可
    FooterGoodfooter,
    HeaderBigheader,
    ContentFatSuperfatHallelujah
  }
}
</script>

上述写法完成后，你就可以直接在模板中使用你期望的kebab-case格式调用组件。

方案2：主动指定kebab-case注册名

如果你想要注册名和模板调用名完全一一对应，不需要依赖自动转换规则，可以在注册时用字符串格式指定kebab-case的组件名：

<script>
// 导入时可以用任意合法的变量名
import CFooter from "@/comp/footer/c_footer.vue";
import CHeader from "@/comp/header/xxx.vue";
import CContent from "@/comp/content/xxx.vue";

export default {
  name: 'App',
  components: {
    // 用引号包裹kebab-case字符串作为组件的注册名
    'footer-goodfooter': CFooter,
    'header-bigheader': CHeader,
    'content-fat-superfat-hallelujah': CContent
  }
}
</script>

内容的提问来源于stack exchange，提问作者Lee