开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

上一期我们模版，这一期我们看一下组件中的样式。

style标签就是代表组件的样式，我们一般可以直接写。

<style>
这里写样式
</style>

但是这样写样式它是全局，是没有隔离。比如你在组件a中写了一个class名，在组件b中也写了，那么肯定某一个会被覆盖。

当然，你可以通过起一个不同class的名来规避这个问题，只要你不嫌烦。所以，vue推出了两种样式隔离的方法

样式隔离

style scoped

其实vue对每个组件都会标明一个id，那么借助这个ID，我们就可以实现样式隔离

当你给style标签加上scoped之后，vue编译css的时候就会把这个id加上。比如

<style scoped>
.a{}
</style>

那么这个css就会编译为.a[data-v-xxxx]{},这样就是实现了样式隔离。

这种其实是vue版的css module。css module也是为了解决样式隔离，实现它有很多方案，但是我只说vue的方案。当你给style标签加上module之后，vue编译css的时候就会生成一个随机的class名。比如

<style module>
.a{}
</style>

当我们使用的时候，稍微有点特殊，我们需要借助一个$style,<div :class="$style.a"></div>,将编译过随机的class名绑定正确，样式才能生效。

vue里有一些专用的选择器，这些不是css的标准,其实你们可以把这个当作伪元素，用法都是:xx(selector)

这个主要是用于slot插槽，因为插槽很多时候被认为是是父组件的，如果你需要从子组件里修改父组件的，就可以用到这个.

深度选择器，用于父组件改变子组件的样式，常用于修改一些三方组件库的样式

这个是用于在scoped的情况下，可以添加全局class的，作用不大

而在vue3中，最惊喜的莫过于子style中可以使用v-bind了,它其实说白了就是一个css 变量的hack

const a = ref('red')
<style scoped>
.a{
    color:v-bind('a')
}
</style>

这样完全摆脱了我们去绑定style，更加简单方便