(https://www.cnblogs.com/karthuslorin/p/9038854.html)
何為scoped奈籽？
在vue文件中的style標(biāo)簽上陨舱，有一個(gè)特殊的屬性：scoped吨些。當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)，它的CSS樣式就只能作用于當(dāng)前的組件次和，也就是說，該樣式只能適用于當(dāng)前組件元素。通過該屬性曾雕，可以使得組件之間的樣式不互相污染。如果一個(gè)項(xiàng)目中的所有style標(biāo)簽全部加上了scoped助被，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化剖张。
scoped的實(shí)現(xiàn)原理
vue中的scoped屬性的效果主要通過PostCSS轉(zhuǎn)譯實(shí)現(xiàn)切诀，如下是轉(zhuǎn)譯前的vue代碼：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
轉(zhuǎn)譯后：
<style>
.example[data-v-5558831a] {
color: red;
}
</style>
<template>
<div class="example" data-v-5558831a>hi</div>
</template>
即：PostCSS給一個(gè)組件中的所有dom添加了一個(gè)獨(dú)一無二的動(dòng)態(tài)屬性，然后搔弄，給CSS選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器來選擇該組件中dom幅虑，這種做法使得樣式只作用于含有該屬性的dom——組件內(nèi)部dom。
為什么需要穿透scoped顾犹？
scoped看起來很美倒庵，但是，在很多項(xiàng)目中炫刷，會(huì)出現(xiàn)這么一種情況哄芜，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式柬唯，而又不想去除scoped屬性造成組件之間的樣式污染认臊。此時(shí)只能通過特殊的方式，穿透scoped锄奢。
<style scoped>
外層 >>> 第三方組件 {
樣式
}
</style>
通過 >>> 可以使得在使用scoped屬性的情況下失晴，穿透scoped，修改其他組件的值拘央。
曲線救國(guó)的方法
其實(shí)涂屁，還擁有一種曲線救國(guó)的方法，即在定義一個(gè)含有scoped屬性的style標(biāo)簽之外灰伟，再定義一個(gè)不含有scoped屬性的style標(biāo)簽拆又，即在一個(gè)vue組件中定義一個(gè)全局的style標(biāo)簽，一個(gè)含有作用域的style標(biāo)簽：
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
此時(shí)栏账，你只需要將修改第三方樣式的css寫在第一個(gè)style中即可帖族。
個(gè)人推薦的方法
以上兩種方法，穿透方法實(shí)際上違反了scoped屬性的意義挡爵，曲線救國(guó)的方法又使得代碼太過于難看竖般。
個(gè)人推薦第三種方法，即：由于scoped看起來很美好茶鹃，但是含有很多的坑涣雕，所以，不推薦不使用scoped屬性闭翩，而通過在外層dom上添加唯一的class來區(qū)分不同組件挣郭。這種方法既實(shí)現(xiàn)了類似于scoped的效果，又方便修改各種第三方組件的樣式疗韵，代碼看起來也相對(duì)舒適兑障。
