Vue.js单文件组件

Vue.js单文件组件（Single File Components，简称SFC）是Vue.js框架中用于封装组件逻辑、模板和样式的核心特性。它将一个组件的HTML结构（模板）、JavaScript逻辑和CSS样式整合到一个.vue文件中，提供模块化、可维护的开发体验。

概述[编辑 | 编辑源代码]

单文件组件是Vue.js推荐的组件编写方式，其核心优势包括：

**模块化**：将模板、脚本和样式集中管理，避免分散在多个文件中。
**预处理器支持**：可直接使用Pug、SCSS、TypeScript等语言。
**作用域样式**：通过scoped属性实现样式隔离。
**编译优化**：Vue编译器会将其转换为高效的JavaScript代码。

一个典型的单文件组件结构如下：

  
<template>  
  <div class="greeting">{{ message }}</div>  
</template>  

<script>  
export default {  
  data() {  
    return { message: "Hello, Vue!" };  
  }  
};  
</script>  

<style scoped>  
.greeting {  
  color: blue;  
}  
</style>

核心部分详解[编辑 | 编辑源代码]

1. <template> 区块[编辑 | 编辑源代码]

定义组件的HTML模板，支持所有Vue模板语法（如指令、插值等）。

**必须包含一个根元素**（如
）。
可使用Pug等预处理语言（需配置构建工具）。

  
<template>  
  <button @click="count++">Clicked {{ count }} times</button>  
</template>

2. <script> 区块[编辑 | 编辑源代码]

包含组件的逻辑代码，支持ES模块导出。

默认导出Vue组件选项对象或使用Composition API的setup()。
支持TypeScript类型标注。

  
<script setup>  
import { ref } from 'vue';  
const count = ref(0);  
</script>

3. <style> 区块[编辑 | 编辑源代码]

定义组件样式，支持CSS或预处理器（如SCSS）。

添加scoped属性可限制样式作用域（仅当前组件生效）。
使用module属性启用CSS Modules。

  
<style scoped>  
.button {  
  padding: 8px 16px;  
}  
</style>

实际应用案例[编辑 | 编辑源代码]

案例：用户卡片组件[编辑 | 编辑源代码]

以下是一个完整的用户信息展示组件：

  
<template>  
  <div class="user-card">  
    <img :src="user.avatar" alt="Avatar">  
    <h3>{{ user.name }}</h3>  
    <p>{{ user.bio }}</p>  
  </div>  
</template>  

<script>  
export default {  
  props: {  
    user: {  
      type: Object,  
      required: true  
    }  
  }  
};  
</script>  

<style scoped>  
.user-card {  
  border: 1px solid #ddd;  
  padding: 20px;  
  max-width: 300px;  
}  
</style>

编译原理[编辑 | 编辑源代码]

Vue单文件组件需要通过构建工具（如Vite或Webpack）编译为JavaScript模块。编译过程分为三个阶段：

高级特性[编辑 | 编辑源代码]

自定义块[编辑 | 编辑源代码]

可通过添加自定义块扩展功能（如文档、测试等）：

  
<docs>  
## 组件说明  
此组件用于显示用户基本信息  
</docs>

动态组件[编辑 | 编辑源代码]

结合<component :is="...">实现动态渲染：

  
<template>  
  <component :is="currentComponent" />  
</template>

常见问题[编辑 | 编辑源代码]

Q: 为什么模板需要根元素？

 A: Vue的虚拟DOM diff算法需要单一根节点进行比对。

Q: 如何全局注册SFC？

 A: 在main.js中使用app.component('MyComponent', MyComponent)。

总结[编辑 | 编辑源代码]

单文件组件是Vue.js应用开发的基石，通过统一的文件结构提供清晰的代码组织方式。初学者应从基础模板开始，逐步掌握作用域样式、Composition API等高级特性。