单文件组件由三个不同的实体组成:模板、脚本和样式。所有这些都很重要,但后者往往被忽视,尽管它可能会变得复杂,并经常导致挫折和错误。更好地理解可以改进代码审查并减少调试时间。
这里有 7 个小贴士可以帮助你。
1.样式作用域和插槽内容
将样式的作用域限定为只影响当前组件,是防止组件耦合和意外副作用的有效策略。
它是通过添加 scoped 属性来转换以下内容来实现的:
<template>
<div class="title">Hello world!</div>
</template>
<style scoped>
.title {
font-size: 24px;
}
</style>
to
<template>
<div class="title" data-v-7ba5bd90>Hello world!</div>
</template>
<style scoped>
.title[data-v-7ba5bd90] {
font-size: 24px;
}
</style>
如果想让样式影响子组件,可以使用 deep
选择器。
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
其编译为:
.a[data-v-7ba5bd90] .b {
/* ... */
}
使用插槽选择器对插槽内的内容也是如此。
<style scoped>
:slotted(div) {
color: red;
}
</style>
2.作用域选择器性能
作用域样式不会消除对类的需求。由于 CSS 选择器的工作方式,当使用作用域时,p { color: red }
的速度会慢很多倍。如果使用类来代替,性能方面的影响可以忽略不计。
<!-- DO -->
<template>
<h1 class="title">Hello world!</h1>
</template>
<style scoped>
.title {
font-size: 24px;
}
</style>
<!-- DONT -->
<template>
<h1>Hello world!</h1>
</template>
<style scoped>
h1 {
font-size: 24px;
}
</style>
3.全局样式
影响整个应用程序的样式可能不是一个好主意。如果您还是想这么做,可以将作用域样式与非作用域样式混合使用,或者使用 :global
伪选择器
<style scoped>
:global(.red) {
color: red;
}
</style>
4.样式中的 Javascript 变量
自 Vue 3.2 版起,可以在样式标签内使用 v-bind
。这可以带来一些有趣的用例,比如只需几行代码就能实现颜色选择器。
<template>
<h1 class="text">Hello World!</h1>
<input type="color" v-model="color" />
</template>
<script setup>
import { ref } from "vue";
const color = ref("");
</script>
<style>
.text {
color: v-bind(color);
}
</style>
一个更高级的用例是使可重用应用程序图标组件的图标大小动态化。
<template>
<p>
<input type="radio" v-model="size" :value="sizes.s" />S
<input type="radio" v-model="size" :value="sizes.m" />M
<input type="radio" v-model="size" :value="sizes.l" />L
<input
type="radio"
v-model="size"
:value="sizes.xl"
/>XL
</p>
<div class="icon" />
</template>
<script setup lang="ts">
import { ref } from "vue";
enum sizes {
s = 8,
m = 16,
l = 32,
xl = 64,
}
const size = ref(sizes.xl);
</script>
<style>
.icon {
width: v-bind(size + "px");
height: v-bind(size + "px");
background: #cecece;
}
</style>
5.CSS 模块
只需在样式标签中添加 module
属性,即可立即支持 CSS 模块。这些类会通过 $style
变量自动显示在模板中。
<template>
<p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
color: red;
}
</style>
6.CSS 与 SCSS 中的变量
SCSS 变量是我们编写 CSS 方式的一次重大变革。在使用预处理器之前,使用变量是不可能的。此后,CSS 迎头赶上,现在所有主流浏览器都支持 CSS 变量。CSS 变量提供了 SCSS 变量所能做到的一切,此外还提供了更简便的主题功能,因此在这场争论中,CSS 变量明显胜出。
7.SCSS include 与 extend
这两个 SCSS 助手经常会引起混淆,因为它们都可以用来减少 SCSS 代码的重复。CSS 输出中存在一些细微的差别,您应该注意。
@include
帮助程序用于包含在 mixin 块中编写的代码。
<template>
<p class="error-text">Hello World!</p>
<p class="error-notification">Hello World!</p>
</template>
<style lang="scss">
@mixin error {
color: red;
}
.error-text {
@include error;
font-size: 24px;
}
.error-notification {
@include error;
border: 1px solid red;
padding: 8px;
}
</style>
生成的 CSS 将根据需要多次重复代码
.error-text {
color: red;
font-size: 24px;
}
.error-notification {
color: red;
border: 1px solid red;
padding: 8px;
}
这里的 error
mixin 只有一条规则,但在实际应用中通常会有更复杂的 mixin。
另一方面,当元素几乎相同时 @extend
更有用。
<template>
<p class="error-text">Hello World!</p>
<p class="error-notification">Hello World!</p>
</template>
<style lang="scss">
%error {
color: red;
}
.error-text {
@extend %error;
font-size: 24px;
}
.error-notification {
@extend %error;
border: 1px solid red;
padding: 8px;
}
</style>
生成的代码为:
.error-notification,
.error-text {
color: red;
}
.error-text {
font-size: 24px;
}
.error-notification {
border: 1px solid red;
padding: 8px;
}
这里的一般规则是选择 extend
,除非你想在 mixin 中使用一个参数,在这种情况下,只有 include
才有效。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。