单文件组件
Single-File Component.
将 vue 组件的模板(template), 逻辑(script), 样式(style)封装在单个文件中.
<script setup>
</script>
<template>
</template>
<style>
</style>
为什么要使用单文件组件呢?
要知道怎么使用单文件组件,首先得知道什么是单文件组件.
官网是这样说的:
Vue 的单文件组件 (即
*.vue文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文 件中。
简单理解就是 .vue 文件. 在这个文件中可以同时包含 html,js/ts,css 代码.
单文件组件的优点有:
- 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
- 让本来就强相关的关注点自然内聚
- 预编译模板，避免运行时的编译开销
- 组件作用域的 CSS
- 在使用组合式 API 时语法更简单
- 通过交叉分析模板和逻辑代码能进行更多编译时优化
- 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
- 开箱即用的模块热更新 (HMR) 支持
每个 .vue 文件最多一个 <template>, <script>, <script scope> 标签. 可以有多个 <style> 标签.
注意: <script> 和 <script scope> 标签可以同时存在.
组件作用域的 CSS
<style> 标签有 scope 或 module 属性.
当使用 <style scope> 标签的时候, 表示它只会影响当前组件的元素. 父组件的样式将不会渗透到子组件中.
但是子组件的根节点会同时被父组件和子组件的作用域样式影响.
如何需要在父组件里控制子组件的样式呢?
可以使用 :deep() 这个伪类.
<style scope>
.a :deep(.b) {
/* ... */
}
</style>
上面的代码会被编译成
.a[data-v-f3f3eg9] .b {
/* ... */
}
这样就实现了在父组件中控制子组件的样式.