Vue3 style中新增的特性有哪些及怎么用

這篇文章主要介紹“Vue3 style中新增的特性有哪些及怎么用”，在日常操作中，相信很多人在Vue3 style中新增的特性有哪些及怎么用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue3 style中新增的特性有哪些及怎么用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

style新特性

Vue3.2版本對(duì)單文件組件的style樣式進(jìn)行了很多升級(jí)，如局部樣式、css變量以及樣式暴露給模板使用等。（學(xué)習(xí)視頻分享：vue視頻教程）

一、局部樣式

當(dāng) <style> 標(biāo)簽帶有 scoped attribute 的時(shí)候，它的 CSS 只會(huì)應(yīng)用到當(dāng)前組件的元素上：

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

二、深度選擇器

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

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

通過(guò) v-html 創(chuàng)建的 DOM 內(nèi)容不會(huì)被作用域樣式影響，但你仍然可以使用深度選擇器來(lái)設(shè)置其樣式。

三、插槽選擇器

默認(rèn)情況下，作用域樣式不會(huì)影響到 <slot/> 渲染出來(lái)的內(nèi)容，因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來(lái)的。使用 :slotted 偽類(lèi)以確切地將插槽內(nèi)容作為選擇器的目標(biāo)：

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

四、全局選擇器

如果想讓其中一個(gè)樣式規(guī)則應(yīng)用到全局，比起另外創(chuàng)建一個(gè) <style>，可以使用 :global 偽類(lèi)來(lái)實(shí)現(xiàn)：

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

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

你也可以在同一個(gè)組件中同時(shí)包含作用域樣式和非作用域樣式：

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

六、支持CSS Modules

<style module> 標(biāo)簽會(huì)被編譯為 CSS Modules 并且將生成的 CSS 類(lèi)鍵暴露給組件：

1、 默認(rèn)以$style 對(duì)象暴露給組件；

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

2、可以自定義注入module名稱(chēng)

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

七、與setup一同使用

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

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

八、動(dòng)態(tài) CSS

單文件組件的 <style> 標(biāo)簽可以通過(guò) v-bind 這一 CSS 函數(shù)將 CSS 的值關(guān)聯(lián)到動(dòng)態(tài)的組件狀態(tài)上：

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

到此，關(guān)于“Vue3 style中新增的特性有哪些及怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！