vue3 单文件 style 特性

scope

只对当前组件的样式生效，这在 vue2 中经常使用。

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

深度选择器

选择子组件的类名

<style scoped>
.a :deep(.b) {
  /* ... */
}

/* 或 */
.a /deep/ .b{

}

/* 或 */
.a >>> .b{

}
</style>

插槽选择器

子组件的插槽的内容属于父组件，子组件要选择需要用 :slotted

父组件

<template>
  <HelloWorld>
    <div>122</div>
  </HelloWorld>
</template>

子组件

<template>
  <div class="children">
    <slot></slot>
  </div>
</template>
<style scoped>
.children :slotted(div){
  color: red;
}
</style>

全局选择器

选择全局的 .red class

<style scoped>
:global(.red) {
  color: red;
}
</style>

moudle

module 属性会将css类放在 $style 对象上

<template>
  <p :class="$style.red"> 文本 </p>
</template>

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

自定义名称

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

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

API 中获取 style module

// 默认, 返回 <style module> 中的类
useCssModule()

// 命名, 返回 <style module="classes"> 中的类
useCssModule('classes')

v-model 动态 css

v-bind(color) 绑定即可

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

<script setup>中一样

<script setup>
  const theme = {
    color: 'red'
  }
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>