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如何在線預(yù)覽各類型文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了vue實現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue中關(guān)閉當(dāng)前頁面的方法與原生JavaScript類似,都是通過window對象的close方法實現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁面的方法,需要的朋友可以參考下2023-09-09
vue項目實現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進(jìn)行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue實現(xiàn)百度下拉列表交互操作,結(jié)合實例形式分析了vue.js使用jsonp針對百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue DatePicker日期選擇器時差8小時問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
最近在工作中遇到的一個需求，需要在vue-cli建立的應(yīng)用中引入jquery的方式，通過查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁應(yīng)用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
Vue中ECharts圖表過多易導(dǎo)致頁面卡死,建議全局引入并動態(tài)銷毀實例,避免資源堆積,代碼示例包含樣式配置,可根據(jù)需求調(diào)整2025-07-07
在現(xiàn)代前端項目開發(fā)中,主題切換已成為提升用戶體驗的核心功能之一,無論是適配用戶白天?/?夜間的使用場景、滿足企業(yè)級產(chǎn)品的品牌定制需求,還是應(yīng)對不同設(shè)備的顯示環(huán)境,靈活的主題系統(tǒng)都能讓產(chǎn)品更具競爭力,所以本文介紹了Vue實現(xiàn)項目主題切換功能的兩種方案2025-09-09