vue中的scoped穿透

1.Vue中的style標(biāo)簽上有一個(gè)特殊的屬性scoped膏蚓。當(dāng)style標(biāo)簽擁有scoped屬性時(shí)候畸写,它的css樣式只能作用于當(dāng)前的Vue組件驮瞧,防止組件之間污染枯芬。

2.PostCSS給一個(gè)組件中的所有dom添加了一個(gè)獨(dú)一無(wú)二的動(dòng)態(tài)屬性论笔,給css選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器千所,這種做法使得樣式只作用于含有該屬性的dom元素狂魔。

轉(zhuǎn)譯前

<style scoped>
    .eg{
        color:red;
    }
</style>
<template>
    <div class="eg">scoped測(cè)試</div>
</template>

轉(zhuǎn)譯后

.eg[data-v-5555666a] {
  color: red;
}
<template>
    <div class="eg" data-v-5555666a>scoped測(cè)試</div>
</template>

3.scoped穿透

普通css的樣式穿透 使用>>>

    //外層 >>> 第三方組件   
   .wrap>>> .el-input__inner{
      height: 1rem;
    }

sass和less的樣式穿透 使用/deep/

    //外層 /deep/ 第三方組件
    .wrap /deep/ .el-input__inner{
       height: 1rem;
    }

其他方法

1.在vue組件中使用兩個(gè)style標(biāo)簽淫痰,一個(gè)加scoped屬性,一個(gè)不加scoped屬性待错,把需要覆蓋的css樣式寫(xiě)在不加scoped屬性的style標(biāo)簽中籽孙。
2.建一個(gè)css文件火俄,里面寫(xiě)覆蓋的css樣式,在入口文件main.js 中引入瓜客。
3.在vue組件中不使用scoped屬性适瓦。

原文作者:匆匆那年_海,博客主頁(yè):http://www.reibang.com/u/910c0667c515
95后前端漢子玻熙,愛(ài)編程、優(yōu)秀嗦随、聰明、理性称杨、沉穩(wěn)肌毅、智慧的程序猿一枚姑原。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市锭汛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌唤殴,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件朵逝,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡配名,警方通過(guò)查閱死者的電腦和手機(jī)啤咽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)渠脉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人芋膘,你說(shuō)我怎么就攤上這事∥螅” “怎么了臂拓?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵潜腻,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我融涣,道長(zhǎng)童番,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任剃斧,我火速辦了婚禮,結(jié)果婚禮上幼东,老公的妹妹穿的比我還像新娘。我一直安慰自己根蟹,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布简逮。 她就那樣靜靜地躺著,像睡著了一般散庶。 火紅的嫁衣襯著肌膚如雪蕉堰。 梳的紋絲不亂的頭發(fā)上悲龟,一...
    開(kāi)封第一講書(shū)人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音须教,去河邊找鬼皿渗。 笑死没卸,一個(gè)胖子當(dāng)著我的面吹牛羹奉,可吹牛的內(nèi)容都是我干的约计。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼煤蚌,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了尉桩?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蜘犁,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后止邮,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體奏窑,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡屈扎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年埃唯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鹰晨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片墨叛。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡模蜡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出忍疾,到底是詐尸還是另有隱情棚潦,我是刑警寧澤膝昆,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布丸边,位于F島的核電站荚孵,受9級(jí)特大地震影響妹窖,放射性物質(zhì)發(fā)生泄漏收叶。R本人自食惡果不足惜骄呼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一判没、第九天 我趴在偏房一處隱蔽的房頂上張望蜓萄。 院中可真熱鬧澄峰,春花似錦嫉沽、人聲如沸俏竞。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)玻佩。三九已至席楚,卻和暖如春咬崔,著一層夾襖步出監(jiān)牢的瞬間烦秩,已是汗流浹背垮斯。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甚脉,地道東北人丸升。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓牺氨,卻偏偏與公主長(zhǎng)得像狡耻,于是被迫代替她去往敵國(guó)和親猴凹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子夷狰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 本文發(fā)布在我的博客vue中慎用style的scoped屬性許可協(xié)議: 署名-非商業(yè)性使用-禁止演繹4.0國(guó)際 ...
    2ue閱讀 9,054評(píng)論 2 7
  • 一個(gè)web應(yīng)用是離不開(kāi)html沼头、css與js,其中css充斥的整個(gè)web項(xiàng)目中书劝。css它有一個(gè)特定,它是全局的购对。這...
    午后一小憩閱讀 4,238評(píng)論 3 12
  • ## 框架和庫(kù)的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計(jì)架構(gòu)和**解決方案**。> > 庫(kù)(lib...
    Rui_bdad閱讀 2,895評(píng)論 1 4
  • title: 風(fēng)格指南type: style-guide 這里是官方的 Vue 特有代碼的風(fēng)格指南骡苞。如果在工程中使...
    ChenyuMa閱讀 1,060評(píng)論 1 1
  • 對(duì)MVC、MVP解幽、MVVM的理解 MVC阮一峰老師MVC圖示 M 表示 Model , 專(zhuān)門(mén)用來(lái)處理數(shù)據(jù)模型贴见。V ...
    郝晨光閱讀 2,634評(píng)論 1 22