【JS】vue3中组件命名问题-CSDN博客

本文链接：https://blog.csdn.net/Kevin_Gates/article/details/147986951

在 Vue 3 的单文件组件（SFC）里，import 语句中的 Editor 采用大写开头，而模板里使用小写标签，这是由于 Vue 支持不同的组件命名风格，并且在模板解析时会进行大小写转换。下面详细解释其原理：

JavaScript 中的组件命名
在 JavaScript 或 TypeScript 里，通常遵循 PascalCase（大驼峰命名法）来命名组件，即每个单词首字母大写，像 Editor 这样。这是一种常见的命名约定，能清晰表明这是一个组件。
模板中的组件命名
在 Vue 模板里，HTML 标签名是大小写不敏感的，所以 Vue 支持两种组件命名方式：

PascalCase：可直接在模板里使用大写开头的组件名，如。
kebab-case：使用短横线分隔的小写命名，像这种形式。Vue 会自动把 kebab-case 标签名映射到对应的 PascalCase 组件名。
示例代码
以下是你当前文件的示例，展示了不同命名风格的使用：

<template>
  <div>
    <!-- ... 已有代码 ... -->
    <el-form-item  label="更新内容">
      <!-- 使用 kebab-case 命名 -->
      <editor v-model="formData.content"/>
      <!-- 或者使用 PascalCase 命名 -->
      <!-- <Editor v-model="formData.content"/> -->
    </el-form-item>
    <!-- ... 已有代码 ... -->
  </div>
</template>

<script setup>
// 使用 PascalCase 命名导入组件
import Editor from "@/components/richtext/rich-edit.vue"
// ... 已有代码 ...
</script>

总结
import 时用 Editor 大写命名是 JavaScript 的命名约定，模板里用小写命名是遵循 HTML 大小写不敏感特性，Vue 会自动将 kebab-case 转换为对应的 PascalCase 组件名，两种命名方式都能正常工作。