詳解vue樣式穿透的幾種方式
更新時間：2022年06月29日 10:44:04 作者：汪鴻的好朋友
本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
scoped屬性
我們在vue組件寫樣式一般是在<style>標簽里面，但是我們在這里的樣式默認是全局樣式，如果其它組件的class名取重復了則會導致樣式污染。
所以vue支持在<style>標簽添加scoped屬性，這樣當前組件的樣式只會在當前樣式生效，其它組件不會影響到。
例子如下：
<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的樣式最終也會帶上這些屬性，根據這些屬性找到元素。
這樣子避免樣式全局污染。
如果你的引入了第三方庫，如果你想修改第三方庫的樣式，直接通過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>
只看到默認的padding。我們寫的樣式沒有渲染出來。
此時需要樣式穿透，需要用到深度選擇器/deep/。
<style lang="scss" scoped> .box-card {
/deep/.el-card__body {
padding: 10px;
}
} </style>
可以看到生效了。
樣式穿透
vue都是通過深度選擇器來樣式穿透的。除了上面的講/deep/，我熟知的還有::v-deep，>>>。
那它們有何區(qū)別？
- 如果你使用的是
css，沒有使用css預處理器，則可以使用>>>，/deep/，::v-deep。 - 如果你使用的是
less或者node-sass，那么可以使用/deep/，::v-deep都可以生效。 - 如果你使用的是
dart-sass，那么就不能使用/deep/，而是使用::v-deep才會生效。
總結
總結一下：
css可以使用>>>，/deep/，::v-deepless和node-sass可以使用/deep/，::v-deepdart-sass可以使用::v-deep
到此這篇關于詳解vue樣式穿透的幾種方式的文章就介紹到這了,更多相關vue樣式穿透內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
收集表單數據可以使用這個v-model實現這個數據的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結合使用，這篇文章主要介紹了vue的表單數據收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
讓多個組件使用同一個掛載點,并動態(tài)切換,這就是動態(tài)組件,下面這篇文章主要給大家介紹了關于Vue高級用法實例教程之動態(tài)組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
vuejs是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。今天給大家分享一篇教程關于Vue.js 60分鐘快速入門教程，一起看看吧2017-03-03
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家詳細介紹了Vue組件化學習之scoped，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue.js作為一個靈活的JavaScript框架,可以很容易地與圖像處理庫和濾鏡效果庫集成,以實現各種圖像處理需求,下面我們就來學習一下vue是如何實現圖片處理與濾鏡效果的吧2023-10-10
這篇文章主要介紹了vue自定義指令用法,結合實例形式總結分析了vue自定義指令常見寫法與相關操作注意事項,需要的朋友可以參考下2019-03-03
v-for是vue的循環(huán)指令,作用是遍歷數組(對象)的每一個值,這篇文章主要給大家介紹了關于Vue中v-for的9種使用案例的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
Vue Element前端應用開發(fā)之用戶管理模塊的處理
本篇隨筆以權限管理模塊中的用戶管理為媒介，進行相關功能的介紹和界面設計的處理。2021-05-05
這篇文章主要為大家詳細介紹了vuedraggable實現拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04