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

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

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

style scoped

需要注意的有：

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

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

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

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

    :slloted(.a) {
        ...
    }

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

    :slloted(.a) {
        ...
    }

scoped style 可以和 style同時存在

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)文章

vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程
這篇文章主要介紹了vue進(jìn)入頁面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue使用天地圖、openlayers實(shí)現(xiàn)多個底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2022-04-04
vue實(shí)現(xiàn)拍照或錄像的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-11-11
用vscode開發(fā)vue應(yīng)用的方法步驟
這篇文章主要介紹了用vscode開發(fā)vue應(yīng)用的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
在Vue中獲取組件聲明時的name屬性方法
今天小編就為大家分享一篇在Vue中獲取組件聲明時的name屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù)
Promise就是一個給一步操作提供的容器，在這個容器里，有兩個階段無法改變的階段，這兩個階段在文中給大家提到。對vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù) 的相關(guān)知識感興趣的朋友，跟隨小編一起看看吧
2019-06-06
vue?parseHTML函數(shù)源碼解析start鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML函數(shù)源碼解析start鉤子函數(shù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue圖片拖拉轉(zhuǎn)放大縮小組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片拖拉轉(zhuǎn)放大縮小組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
vue雙向數(shù)據(jù)綁定指令v-model的用法
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定指令v-model的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實(shí)現(xiàn)萬年日歷的示例詳解
又是一個老生常談的功能，接下來會從零實(shí)現(xiàn)一個萬年日歷，從布局到邏輯，再到隨處可見的打卡功能。文中的示例代碼簡潔易懂，需要的可以參考一下
2023-01-01