詳解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查找，修改樣式是沒有效果的。
比如我在項目引入了餓了么的組件庫elementUI。
<el-card class="box-card"> <span class="content">hello world</span> </el-card>
如果我們想把padding改小一點,下面這樣寫是沒有效果的。
<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-deepless和node-sass可以使用/deep/，::v-deepdart-sass可以使用::v-deep
到此這篇關(guān)于詳解vue樣式穿透的幾種方式的文章就介紹到這了,更多相關(guān)vue樣式穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個v-model實現(xiàn)這個數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
讓多個組件使用同一個掛載點,并動態(tài)切換,這就是動態(tài)組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級用法實例教程之動態(tài)組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
vuejs是當(dāng)下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。今天給大家分享一篇教程關(guān)于Vue.js 60分鐘快速入門教程，一起看看吧2017-03-03
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue.js作為一個靈活的JavaScript框架,可以很容易地與圖像處理庫和濾鏡效果庫集成,以實現(xiàn)各種圖像處理需求,下面我們就來學(xué)習(xí)一下vue是如何實現(xiàn)圖片處理與濾鏡效果的吧2023-10-10
這篇文章主要介紹了vue自定義指令用法,結(jié)合實例形式總結(jié)分析了vue自定義指令常見寫法與相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
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è)計的處理。2021-05-05
這篇文章主要為大家詳細(xì)介紹了vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04