VueJs 导入和使用具有两个不同名称的组件答案

【问题标题】：VueJs importing and using components with two different nameVueJs 导入和使用具有两个不同名称的组件
【发布时间】：2020-06-30 06:47:28
【问题描述】：

我在SideBar.vue 文件中有一个名为 Sidebar 的组件，并已在index.vue 中导入，如下所示，它正在工作。

<template>
  <div>
    <side-bar @close="isOpen = false" />
  </div>
</template>

import SideBar from '@/common/SideBar';
export default {
  components: {
    SideBar,
  },
}

如果我在下面的组件中声明，它也可以工作。

<template>
  <div>
    <some-thing @close="isOpen = false" />
  </div>
</template>

import SideBar from '@/common/SideBar';
export default {
  components: {
    'some-thing': SideBar,
  },
}

我的问题是 vue 如何自动映射 side-bar 和 SideBar？

【问题讨论】：

标签： javascript vue.js components frontend

【解决方案1】：

默认情况下，Vue 会自动将 CamelCase 组件映射到 kebab-case 名称。因此，camelCase 中的组件名称SideBar 会自动映射到kebab-case 中的名称side-bar。在 html 模板中建议使用 kebab case 而不是 camelCase，在 Javascript 中建议使用 camelCase 而不是 kebab-case。它们只是样式约定。您可以在 html 模板或 javascript 代码中使用任何一种样式。它会起作用的。

我建议你从here阅读更多相关信息

【讨论】：