快捷導(dǎo)航

vue3單文件組件中style特性的深入講解

更新時(shí)間：2021年09月06日 09:09:25 作者：_六耳_

單文件就是把一個(gè)頁面拆分為多個(gè),多層次的組件,通過多層引用,大大縮小vue文件的長度和頁面復(fù)雜度,下面這篇文章主要給大家介紹了關(guān)于vue3單文件組件中style特性的相關(guān)資料,需要的朋友可以參考下

style scoped

需要注意的有：

樣式不會影響到其他組件，只會在當(dāng)前組件生效。
子組件的根元素會同時(shí) 受父組件的作用域樣式，和子組件的作用域樣式影響. 這樣做的目的是讓父組件可以調(diào)整子組件的布局。
存在3個(gè)特殊的選擇器：

1. 深度選擇器：可以影響到子組件. 使用偽類 => :deep(cls: 影響的選擇器)

    .a :deep(.b) {
        ...
    }

2. 插槽選擇器: 可以影響到插槽內(nèi)容的樣式。使用偽類 => :slotted(選擇器)

    :slloted(.a) {
        ...
    }

3. 全局選擇器: 是樣式影響到全局。使用偽類 => :global(選擇器)

    :slloted(.a) {
        ...
    }

scoped style 可以和 style同時(shí)存在

style module

style 標(biāo)簽中帶有 module。其樣式和 style scoped一樣只能作用域于當(dāng)前組件。

此方式會將css 編譯為 css modules.且暴露給組件$styles對象來使用css樣式

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

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

可以給module賦值來自定義暴露的對象名稱

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

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

在組合式api中可以使用 useCssModule() api來使用cssModule.

// 默認(rèn), 返回 <style module> 中的類
useCssModule()

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

狀態(tài)驅(qū)動的動態(tài)css

可以使用 v-bind() 來將css值關(guān)聯(lián)到動態(tài)的組件狀態(tài)上

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

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

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

總結(jié)

到此這篇關(guān)于vue3單文件組件中style特性的文章就介紹到這了,更多相關(guān)vue3單文件組件style特性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在Vue3中使?echarts?圖表寬度自適應(yīng)變化的操作方法
本文介紹了在Vue3中使用ECharts時(shí),如何使圖表容器寬度自適應(yīng)頁面大小,通過修改模板中的div樣式,將寬度設(shè)置為100%,并監(jiān)聽窗口大小變化事件,調(diào)用ECharts實(shí)例的resize方法,實(shí)現(xiàn)圖表的自適應(yīng)調(diào)整,感興趣的朋友跟隨小編一起看看吧
2025-02-02
記錄一個(gè)van-list不斷onLoad加載的坑及解決
這篇文章主要介紹了記錄一個(gè)van-list不斷onLoad加載的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
淺析Vue中生命周期函數(shù)的區(qū)別
生命周期分為四個(gè)對子，根據(jù)不同的情況使用不同的函數(shù)，這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別，感興趣的小伙伴可以了解一下
2023-08-08
vant中的toast輕提示實(shí)現(xiàn)代碼
這篇文章主要介紹了vant中的toast輕提示實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
對vue里函數(shù)的調(diào)用順序介紹
下面小編就為大家分享一篇對vue里函數(shù)的調(diào)用順序介紹，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue.js自定義事件的表單輸入組件方法
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue.js中導(dǎo)出Excel表格的案例分析
這篇文章主要介紹了vue.js中如何導(dǎo)出Excel表格,在項(xiàng)目中經(jīng)常會遇到這樣的需求，今天小編分步驟通過實(shí)例代碼給大家詳細(xì)介紹，需要的朋友可以參考下
2019-06-06
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
vue實(shí)現(xiàn)右側(cè)滑出層動畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右側(cè)滑出層動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04