詳解vue樣式穿透的幾種方式

更新時間：2022年06月29日 10:44:04 作者：汪鴻的好朋友

本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

scoped屬性

我們在vue組件寫樣式一般是在<style>標(biāo)簽里面，但是我們在這里的樣式默認(rèn)是全局樣式，如果其它組件的class名取重復(fù)了則會導(dǎo)致樣式污染。

所以vue支持在<style>標(biāo)簽添加scoped屬性，這樣當(dāng)前組件的樣式只會在當(dāng)前樣式生效，其它組件不會影響到。

例子如下：

<div class="page">
  <span class="content">hello world</span>
</div>
<style lang="scss" scoped> .page {
  .content {
    color: aquamarine;
    font-size: 20px;
  }
} </style>

最終在瀏覽器渲染出來，div和span上都帶有特殊屬性

然后css的樣式最終也會帶上這些屬性，根據(jù)這些屬性找到元素。

這樣子避免樣式全局污染。

如果你的引入了第三方庫，如果你想修改第三方庫的樣式，直接通過dom查找，修改樣式是沒有效果的。

比如我在項(xiàng)目引入了餓了么的組件庫elementUI。

<el-card class="box-card">
  <span class="content">hello world</span>
</el-card>

如果我們想把padding改小一點(diǎn),下面這樣寫是沒有效果的。

<style lang="scss" scoped> .box-card {
  .el-card__body {
    padding: 10px;
  }
} </style>

只看到默認(rèn)的padding。我們寫的樣式?jīng)]有渲染出來。

此時需要樣式穿透，需要用到深度選擇器/deep/。

<style lang="scss" scoped> .box-card {
  /deep/.el-card__body {
    padding: 10px;
  }
} </style>

可以看到生效了。

樣式穿透

vue都是通過深度選擇器來樣式穿透的。除了上面的講/deep/，我熟知的還有::v-deep，>>>。

那它們有何區(qū)別？

如果你使用的是css，沒有使用css預(yù)處理器，則可以使用>>>，/deep/，::v-deep。
如果你使用的是less或者node-sass，那么可以使用/deep/，::v-deep都可以生效。
如果你使用的是dart-sass，那么就不能使用/deep/，而是使用::v-deep才會生效。

總結(jié)

總結(jié)一下：

css可以使用>>>，/deep/，::v-deep
less和node-sass可以使用/deep/，::v-deep
dart-sass可以使用::v-deep

到此這篇關(guān)于詳解vue樣式穿透的幾種方式的文章就介紹到這了,更多相關(guān)vue樣式穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個v-model實(shí)現(xiàn)這個數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下
2023-01-01
Vue高級用法實(shí)例教程之動態(tài)組件
讓多個組件使用同一個掛載點(diǎn),并動態(tài)切換,這就是動態(tài)組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級用法實(shí)例教程之動態(tài)組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11
Vue.js 60分鐘快速入門教程
vuejs是當(dāng)下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。今天給大家分享一篇教程關(guān)于Vue.js 60分鐘快速入門教程，一起看看吧
2017-03-03
Vue渲染過程淺析
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
Vue組件化學(xué)習(xí)之scoped詳解
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
詳解Vue中如何實(shí)現(xiàn)圖片處理與濾鏡效果
Vue.js作為一個靈活的JavaScript框架,可以很容易地與圖像處理庫和濾鏡效果庫集成,以實(shí)現(xiàn)各種圖像處理需求,下面我們就來學(xué)習(xí)一下vue是如何實(shí)現(xiàn)圖片處理與濾鏡效果的吧
2023-10-10
vue自定義指令用法經(jīng)典實(shí)例小結(jié)
這篇文章主要介紹了vue自定義指令用法,結(jié)合實(shí)例形式總結(jié)分析了vue自定義指令常見寫法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-03-03
Vue中v-for的9種使用案例總結(jié)大全
v-for是vue的循環(huán)指令,作用是遍歷數(shù)組(對象)的每一個值,這篇文章主要給大家介紹了關(guān)于Vue中v-for的9種使用案例的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
Vue Element前端應(yīng)用開發(fā)之用戶管理模塊的處理
本篇隨筆以權(quán)限管理模塊中的用戶管理為媒介，進(jìn)行相關(guān)功能的介紹和界面設(shè)計(jì)的處理。
2021-05-05
vuedraggable實(shí)現(xiàn)簡單拖拽功能
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04