scoped

当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。

<style scoped lang="scss">
</style>

注意：

作用域样式并没有消除对 class 的需求。由于浏览器渲染各种各样 CSS 选择器的方式，p { color: red } 结合作用域样式使用时 (即当与 attribute 选择器组合的时候) 会慢很多倍。如果你使用 class 或者 id 来替代，例如 .example { color: red }，那你几乎就可以避免性能的损失。

小心递归组件中的后代选择器！对于一个使用了 .a .b 选择器的样式规则来说，如果匹配到 .a 的元素包含了一个递归的子组件，那么所有的在那个子组件中的 .b 都会匹配到这条样式规则。

全局选择器

让其中某一个样式应用全局 :global 伪类实现

<style scoped >
:global(.b){
/* 样式 */
}
</style>

// 混合使用
<style  >
/* 全局样式 */
</style>
<style scoped >
/* 局部样式 */
</style>

:deep

深度选择器：处于scoped 的样式中的选择器如果想做更深度的选择，使用:deep()这个伪类

<style scoped lang="scss">
.a:deep(.b){
/* 样式 */
}
</style>

插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标

<style scoped>
:slotted(div) {
  color: red;
}
</style>

module

一个 <style module> 标签会被编译为 CSS Modules 并且将生成的 CSS class 作为 $style 对象暴露给组件( CSS 仅作用于当前组件的效果。)

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

你可以通过给 module attribute 一个值来自定义注入 class 对象的属性名：

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

与组合式 API 一同使用

可以通过 useCssModule API 在 setup() 和 <script setup> 中访问注入的 class。对于使用了自定义注入名称的 <style module> 块，useCssModule 接收一个匹配的 module attribute 值作为第一个参数：

import { useCssModule } from 'vue'

// 在 setup() 作用域中...
// 默认情况下, 返回 <style module> 的 class
useCssModule()

// 具名情况下, 返回 <style module="classes"> 的 class
useCssModule('classes')

动态Style

// setup语法糖版本
<template>
  <div class="home" >
    <button @click="changeColor">改变颜色</button>
  </div>
</template>

<script setup>
import { ref,reactive} from 'vue'
// 也可以做成响应式
let bgColor = ref('aliceblue');
let bgObjColor = reactive({
    color:'green'
});
const changeColor = () => {
  bgColor.value = 'yellow'
}
</script>

<style scoped lang="scss">
.home {
  background-color: v-bind(bgColor);
`/*  background-color: v-bind(bgObjColor.color);*/
}
</style>

// setup在内部
<template>
  <div class="home" >

  </div>
</template>

<script>
import { defineAsyncComponent} from 'vue';
export default defineComponent({
  name: "Home",
 
  setup(props) {
    
    return {
      bgColor:'aliceblue'
    };
  }
})
</script> 

<style scoped lang="scss">
.home {
  background-color: v-bind(bgColor);
}
</style>

单文件组件 CSS 功能 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/api/sfc-css-features.html#css-modules