Vue2 Vue3 Scoped 樣式穿透問題
更新時間：2025年01月16日 15:59:15 投稿：jingxian
Vue中scoped樣式的作用是通過在DOM結(jié)構(gòu)和CSS樣式上添加唯一標(biāo)記來實現(xiàn)樣式私有化和模塊化,這一功能是通過PostCSS轉(zhuǎn)譯實現(xiàn)的,總結(jié)了三條渲染規(guī)則：1. 為HTML DOM節(jié)點添加不重復(fù)的data屬性；2. 在每個CSS選擇器末尾添加當(dāng)前組件的data屬性選擇器
概念
主要是用于修改很多 Vue 常用的組件庫（Element, Vant, AntDesigin），雖然配好了樣式但是還是需要更改其他的樣式， 因為添加了 scoped 實現(xiàn) css 模塊化
就需要用到 樣式穿透 ，更改組件的樣式
scoped 的原理
Vue 中的 scoped 通過在 DOM結(jié)構(gòu)以及 css 樣式上加唯一不重復(fù)的標(biāo)記: data-v-hash 的方式，以保證唯一（而這個工作是由過 PostCSS 轉(zhuǎn)譯實現(xiàn)的），達(dá)到 樣式私有化模塊化的目的。
簡單示例代碼如下
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.ipt {
width: 300px;
margin: 100px 400px;
}
</style>總結(jié)一下 scoped 三條渲染規(guī)則
1.給 HTML 的 DOM 節(jié)點加一個不重復(fù) data 屬性(形如：data-v-123)來表示他的唯一性
2. 在每個 CSS 選擇器的末尾（編譯后的生成的 CSS 語句）加一個當(dāng)前組件的 data 屬性選擇器（如 [data-v-123]）來私有化樣式
3. 如果組件內(nèi)部包含有其他組件，只會給其他組件的最外層標(biāo)簽加上當(dāng)前組件的 data 屬性
注意：
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
.el-input__inner {
background-color: red;
}
}
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換
這篇文章主要介紹了如何利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)數(shù)據(jù)請求攔截，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Element的el-tree控件后臺數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue服務(wù)端渲染操作,結(jié)合簡單實例形式分析了vue.js服務(wù)端渲染操作的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-08-08
vue源碼學(xué)習(xí)之Object.defineProperty 對數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對數(shù)組監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了在vue.js中，使用echarts組件，創(chuàng)建一個餅圖，并且獲取餅圖的數(shù)據(jù)和屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
當(dāng)頁面刷新時,Vuex?的?state?數(shù)據(jù)會丟失,這是因為?Vuex?的狀態(tài)存儲在內(nèi)存中,刷新瀏覽器會重置?JavaScript?的運行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡單到復(fù)雜,幫助你根據(jù)項目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07