Vue 中组件命名与引用

Vue 中组件命名与引用

前言

在 vue 项目中，我们会发现在代码中，import 组件 和 components 组件注册中得命名方式与组件引用时的命名方式不一样，这种现象是由组件名的大小写转换规则造成的。如下示例：

组件引入与注册：

// 导入组件（使用大驼峰命名）
import UserChoose from "../components/user";

export default {
  components: {
    UserChoose // 注册组件（大驼峰命名）
  }
}

组件引用：

<!-- 在模板中使用组件（短横线命名） -->
<user-choose></user-choose>

Vue 支持两种组件命名方式

1、PascalCase（大驼峰命名）

像 UserChoose 这样，每个单词首字母大写。在 JavaScript 里定义组件或者导入组件时，通常会采用这种命名方式。

2、kebab-case（短横线分隔命名）

例如 user-choose，单词之间用短横线分隔。在 Vue 模板的 HTML 标签里引用组件时，需要使用这种命名方式。
Vue 之所以要进行这种转换，是为了适配 HTML 对大小写不敏感的特性。当你在模板里使用短横线命名的组件时，Vue 会自动将其映射为对应的大驼峰命名的组件。

也可以选择在模板中直接使用大驼峰命名，但必须保证处于原生 HTML 支持大写标签的环境中，比如单文件组件（SFC）。不过，为了保证代码风格的一致性，建议统一使用短横线命名。

<!-- 这种写法仅在SFC中有效 -->
<UserChoose></UserChoose>

推荐写法

<!-- 推荐：统一使用 kebab-case -->
<template>
  <div>
    <occupation-choose />
  </div>
</template>

<script>
import UserChoose from './components/user.vue'

export default {
  components: {
    'user-choose': UserChoose // 与模板一致
  }
}
</script>

单文件组件（SFC）

1、什么是单文件组件（SFC）

单文件组件（Single-File Component，SFC）是 Vue.js 特有的一种文件格式，也被称为.vue文件。它把一个 Vue 组件的模板（template）、 逻辑（script）和样式（style） 封装在同一个文件里，形成一个独立的组件单元。这种设计让组件具有很强的内聚性和可维护性，是 Vue 项目的核心组织方式。

2、单文件组件（.vue）的结构

<template>
  <!-- 组件的HTML结构 -->
  <div class="hello-world">
    <h1>{{ message }}</h1>
    <button @click="greet">Say Hello</button>
  </div>
</template>

<script>
// 组件的JavaScript逻辑
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    greet() {
      this.message = 'Hello from Vue SFC!'
    }
  }
}
</script>

<style scoped>
/* 组件的CSS样式，scoped表示样式只作用于当前组件 */
.hello-world {
  padding: 20px;
  text-align: center;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}
</style>