编辑“︁Vue.js单文件组件”︁

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

== 概述 ==  
单文件组件是Vue.js推荐的组件编写方式，其核心优势包括：  
* **模块化**：将模板、脚本和样式集中管理，避免分散在多个文件中。  
* **预处理器支持**：可直接使用Pug、SCSS、TypeScript等语言。  
* **作用域样式**：通过<code>scoped</code>属性实现样式隔离。  
* **编译优化**：Vue编译器会将其转换为高效的JavaScript代码。  

一个典型的单文件组件结构如下：  
<syntaxhighlight lang="html">  
<template>  
  <div class="greeting">{{ message }}</div>  
</template>  

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

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

== 核心部分详解 ==  

=== 1. <template> 区块 ===  
定义组件的HTML模板，支持所有Vue模板语法（如指令、插值等）。  
* **必须包含一个根元素**（如<code><div></code>）。  
* 可使用Pug等预处理语言（需配置构建工具）。  

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

=== 2. <script> 区块 ===  
包含组件的逻辑代码，支持ES模块导出。  
* 默认导出Vue组件选项对象或使用Composition API的<code>setup()</code>。  
* 支持TypeScript类型标注。  

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

=== 3. <style> 区块 ===  
定义组件样式，支持CSS或预处理器（如SCSS）。  
* 添加<code>scoped</code>属性可限制样式作用域（仅当前组件生效）。  
* 使用<code>module</code>属性启用CSS Modules。  

<syntaxhighlight lang="css">  
<style scoped>  
.button {  
  padding: 8px 16px;  
}  
</style>  
</syntaxhighlight>  

== 实际应用案例 ==  

=== 案例：用户卡片组件 ===  
以下是一个完整的用户信息展示组件：  
<syntaxhighlight lang="html">  
<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>  
</syntaxhighlight>  

== 编译原理 ==  
Vue单文件组件需要通过构建工具（如Vite或Webpack）编译为JavaScript模块。编译过程分为三个阶段：  
<mermaid>  
graph LR  
  A[.vue文件] --> B[解析器]  
  B --> C[模板编译为渲染函数]  
  B --> D[脚本处理]  
  B --> E[样式提取]  
  C & D & E --> F[标准JavaScript模块]  
</mermaid>  

== 高级特性 ==  

=== 自定义块 ===  
可通过添加自定义块扩展功能（如文档、测试等）：  
<syntaxhighlight lang="html">  
<docs>  
## 组件说明  
此组件用于显示用户基本信息  
</docs>  
</syntaxhighlight>  

=== 动态组件 ===  
结合<code><component :is="..."></code>实现动态渲染：  
<syntaxhighlight lang="html">  
<template>  
  <component :is="currentComponent" />  
</template>  
</syntaxhighlight>  

== 常见问题 ==  

* '''Q: 为什么模板需要根元素？'''  
  A: Vue的虚拟DOM diff算法需要单一根节点进行比对。  

* '''Q: 如何全局注册SFC？'''  
  A: 在main.js中使用<code>app.component('MyComponent', MyComponent)</code>。  

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

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js组件基础]]