第3章：组件化开发基础

第6节：单文件组件(SFC)

3.6.1 SFC文件结构详解

单文件组件(Single-File Components, 简称SFC)是Vue.js中最常用的组件编写方式，它将组件的模板、逻辑和样式封装在一个文件中，文件扩展名为.vue。

一个标准的SFC文件包含三个主要部分：

<template>
  <!-- 组件的模板结构 -->
  <div class="example">{{ msg }}</div>
</template>

<script>
// 组件的JavaScript逻辑
export default {
  data() {
    return { msg: 'Hello World!' }
  }
}
</script>

<style scoped>
/* 组件的样式，scoped表示局部作用域 */
.example {
  color: red;
}
</style>

各部分说明：

<template>：包含组件的HTML结构，定义了组件的视图。
<script>：包含组件的JavaScript逻辑，定义了组件的数据、方法、生命周期钩子等。
<style>：包含组件的CSS样式，可以通过scoped属性限制样式的作用域。

3.6.2 组件注册的两种方式

Vue.js提供了两种组件注册方式：全局注册和局部注册。

全局注册

全局注册的组件可以在应用的任何地方使用，通过app.component()方法注册：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)

// 全局注册组件
app.component('my-component', MyComponent)

app.mount('#app')

全局注册的组件在任何模板中都可以直接使用：

<!-- 任何组件的模板中 -->
<my-component></my-component>

局部注册

局部注册的组件只能在注册它的父组件中使用，通过components选项注册：

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <my-local-component></my-local-component>
  </div>
</template>

<script>
import MyLocalComponent from './MyLocalComponent.vue'

export default {
  components: {
    // 局部注册组件
    MyLocalComponent
  }
}
</script>

3.6.3 组件命名规范与最佳实践

组件命名规范

** PascalCase 命名法**：组件名首字母大写，多个单词驼峰式连接，如 MyComponent。
** kebab-case 命名法**：HTML模板中使用短横线连接，如 <my-component>。
** 单文件组件文件名**：使用 PascalCase 或 kebab-case，建议统一风格。

最佳实践

** 语义化命名**：组件名应清晰反映其功能，如 UserProfile 而非 ComponentA。
** 避免与HTML元素冲突**：不要使用HTML内置标签名，如 div、span 等。
** 组件粒度**：组件应保持职责单一，避免过大的组件。
** 组件目录结构**：合理组织组件目录，如按功能或类型分组。

3.6.4 组件的作用域样式

`scoped`属性原理

当 <style> 标签添加 scoped 属性后，Vue会为组件的每个元素添加一个唯一的属性（如 data-v-7ba5bd90），并为CSS选择器添加对应的属性选择器，从而限制样式的作用域：

/* 编译前 */
<style scoped>
.example {
  color: red;
}
</style>

/* 编译后 */
<style>
.example[data-v-7ba5bd90] {
  color: red;
}
</style>

深度选择器

有时需要在父组件中修改子组件的样式，可以使用深度选择器：

** ::v-deep （旧语法）**：

<style scoped>
.parent ::v-deep .child {
  color: red;
}
</style>

** :deep() （新语法，推荐）**：

<style scoped>
.parent :deep(.child) {
  color: red;
}
</style>

CSS Modules使用

CSS Modules允许将CSS类名局部化，并通过JavaScript访问：

<template>
  <div :class="styles.container">
    <h1 :class="styles.title">Hello</h1>
  </div>
</template>

<style module>
.container {
  padding: 20px;
}

.title {
  color: blue;
}
</style>

在组合式API中，可以通过 useCssModule 访问样式：

<script setup>
import { useCssModule } from 'vue'

const styles = useCssModule()
</script>

总结

单文件组件(SFC)是Vue.js开发的核心，它将模板、逻辑和样式完美结合，提高了代码的可维护性和复用性。通过掌握组件注册方式、命名规范和样式作用域，你可以编写出结构清晰、风格统一的Vue组件。

在下一节中，我们将学习组件间通信的第一种方式：Props。