Vue3 style中新增的特性如何使用

本文小編為大家詳細介紹“Vue3 style中新增的特性如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue3 style中新增的特性如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

style新特性

Vue3.2版本對單文件組件的style樣式進行了很多升級，如局部樣式、css變量以及樣式暴露給模板使用等。

一、局部樣式

當 <style> 標簽帶有 scoped attribute 的時候，它的 CSS 只會應用到當前組件的元素上：

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

二、深度選擇器

處于 scoped 樣式中的選擇器如果想要做更“深度”的選擇，也即：影響到子組件，可以使用 :deep() 這個偽類：

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

通過 v-html 創建的 DOM 內容不會被作用域樣式影響，但你仍然可以使用深度選擇器來設置其樣式。

三、插槽選擇器

默認情況下，作用域樣式不會影響到 <slot/> 渲染出來的內容，因為它們被認為是父組件所持有并傳遞進來的。使用 :slotted 偽類以確切地將插槽內容作為選擇器的目標：

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

四、全局選擇器

如果想讓其中一個樣式規則應用到全局，比起另外創建一個 <style>，可以使用 :global 偽類來實現：

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

五、混合使用局部與全局樣式

你也可以在同一個組件中同時包含作用域樣式和非作用域樣式：

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

六、支持CSS Modules

<style module> 標簽會被編譯為 CSS Modules 并且將生成的 CSS 類鍵暴露給組件：

1、 默認以$style 對象暴露給組件；

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

2、可以自定義注入module名稱

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

七、與setup一同使用

注入的類可以通過 useCssModule API 在 setup() 和 <script setup> 中使用：

<script setup>
import { useCssModule } from 'vue'
 
// 默認, 返回 <style module> 中的類
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的類
const classesStyle = useCssModule('classes')
</script>

八、動態 CSS

單文件組件的 <style> 標簽可以通過 v-bind 這一 CSS 函數將 CSS 的值關聯到動態的組件狀態上：

<script setup>
const theme = {
  color: 'red'
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

讀到這里，這篇“Vue3 style中新增的特性如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。