vue組件style中scoped的作用及說明
更新時間：2024年09月03日 09:28:59 作者：Ocean__Lv
這篇文章主要介紹了vue組件style中scoped的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
style中scoped的作用
scoped的作用：
使當(dāng)前組件的樣式不會和其它組件沖突，因為它會給每個組件相關(guān)的選擇器添加不會重復(fù)的屬性
//沒有添加scoped
h1 {
}
//添加scoped
h1[data-e543434] {
}注意事項：
- ? 1、使用 scoped 后，父組件的樣式將不會滲透到子組件中。
- ? 2、不過一個子組件的*** 根節(jié)點(diǎn) **會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。
- ? 3、這樣設(shè)計是為了讓父組件可以從布局的角度出發(fā)，調(diào)整其子組件根元素的樣式
<style scoped> </style>
如果希望父組件的樣式滲透到子組件，可以使用*** 樣式穿透 **
scss的樣式穿透的寫法： 加上::v-deep（如果不兼容，就加/deep/ ）
//方案一
.wrapper ::v-deep .swiper-pagination-bullet {
opacity 1
background-color #fff
}
//方案二
.swiper-container /deep/ .swiper-pagination-bullet {
background-color: #f00;
opacity: 1;
}vue中style加上scoped屬性后部分樣式失效
當(dāng) <style> 標(biāo)簽有 scoped 屬性時，它的 CSS 只作用于當(dāng)前組件中的元素；使用 scoped 后，父組件的樣式將不會滲透到子組件中。
不過一個子組件的根節(jié)點(diǎn)會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。
1.混用本地和全局樣式
<style> /* 全局樣式 */ </style> <style scoped> /* 本地樣式 */ </style>
2.深度作用選擇器（樣式穿透）
- vue2： >>> 或者 /deep/
- vue3： &:deep(calssName)
具體可看vue官方文檔的vue-loader
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)驗證碼倒計時按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
更好的了解項目的目錄結(jié)構(gòu),能更好的去開發(fā)項目,下面這篇文章主要給大家介紹了關(guān)于vue3項目目錄結(jié)構(gòu)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue-router中scrollBehavior的巧妙用法
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下2018-07-07
Vue 最顯著的一個功能是響應(yīng)系統(tǒng) —— 模型只是普通對象，修改它則更新視圖。下面這篇文章主要給大家深入講解了關(guān)于Vue的響應(yīng)式原理，以及Vue響應(yīng)式的一些注意事項，需要的朋友下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
使用vue也好有一段時間了，雖然對其雙向綁定原理也有了解個大概，但也沒好好探究下其原理實現(xiàn)，下面這篇文章通過源碼主要分析了Vue的雙向數(shù)據(jù)綁定，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
Vue3?TypeScript?實現(xiàn)useRequest詳情
本文介紹了Vue3?TypeScript實現(xiàn)useRequest詳情，useRequest可能是目前社區(qū)中最強(qiáng)大，最接地氣的請求類?Hooks了?？梢愿采w99%的網(wǎng)絡(luò)請求場景，無論是讀還是寫，無論是普通請求還是分頁請求，無論是緩存還是防抖節(jié)流，通通都能支持，關(guān)于其介紹需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)帶復(fù)選框的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
文章介紹了如何使用axios的cancelToken功能取消請求,包括兩種創(chuàng)建cancelToken的方法：使用CancelToken.source工廠方法和通過傳遞executor函數(shù)創(chuàng)建,還提到了如何處理取消請求的原因,并給出了解決頻繁點(diǎn)擊發(fā)送請求問題的建議2025-12-12
一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法
這篇文章主要介紹了一文搞懂Vue3中的異步組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
本文將介紹幾種基于Vue、Element-UI的換膚實現(xiàn)方案，力爭通俗易懂，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09