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

Question

我在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 map side-bar如何自动与SideBar ？

Answer 1

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

我建议你从这里阅读更多关于它的信息