理解Vue中的scoped實現原理及穿透方法
何爲scoped
在vue文件中的style標籤上，有一個特殊的屬性：scoped。當一個style標籤擁有scoped屬性時，它的CSS樣式就只能作用於當前的組件，也就是說，該樣式只能適用於當前組件元素。通過該屬性，可以使得組件之間的樣式不互相污染。如果一個項目中的所有style標籤全部加上了scoped，相當於實現了樣式的模塊化。
scoped實現原理
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template><style>
.example[data-v-5558831a] {
color: red;
}
</style>
<template>
<div class="example" data-v-5558831a>hi</div>
</template>PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性，然後，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用於含有該屬性的dom——組件內部dom
爲什麼需要穿透scoped
scoped看起來很美，但是，在很多項目中，會出現這麼一種情況，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過特殊的方式，穿透scoped。
白話就是說，比如你使用element-ui的樣式，在demo.vue中使用table組件，並且style上加scoped，在修改table組件裏邊的樣式是不生效的，因爲data-v-009只加在
子組件的第一層，子組件中其他dom是沒有data-v-009這個屬性的，而你寫在scoped中的樣式都會被postcss 添加[data-v-009],樣式只作用於有data-v-009這個屬性的dom
無論你權值多高，甚至添加!important，都無法修改子組件中樣式的
慎用scoped
- 父組件無scoped屬性，子組件帶有scoped，父組件是無法操作子組件的樣式的（原因在原理中可知），雖然我們可以在全局中通過該類標籤的標籤選擇器設置樣式，但會影響到其他組件
- 父組件有scoped屬性，子組件無，父組件也無法設置子組件樣式，因爲父組件的所有標籤都會帶有data-v-469af010唯一標誌，但子組件不會帶有這個唯一標誌屬性，與1同理，雖然我們可以在全局中通過該類標籤的標籤選擇器設置樣式，但會影響到其他組件
- 父子組建都有，同理也無法設置樣式，更改起來增加代碼量
解決方法
- 穿透scoped
注意 stylus的樣式穿透 使用>>> sass和less的樣式穿透 使用/deep/
<style scoped>
外層 >>> 第三方組件 {
樣式
}
/* 使用以下這段無法修改table樣式 */
.el-table__header-wrapper {
height: 20px;
}
/* 穿透之後可以順利修改element-ui樣式 */
.el-contain-row /deep/ .el-table__header-wrapper {
height: 20px;
}
</style>- 使用兩個style標籤
demo.vue
<style>
/* 用於修改第三方庫的樣式 */
</style>
<style scoped>
/* 自己的組件內樣式 */
</style>- 添加class
通過在外層dom上添加唯一的class來區分不同組件。這種方法既實現了類似於scoped的效果，又方便修改各種第三方組件的樣式，代碼看起來也相對舒適。
demo.vue
<style>
.my-class {
color: red;
/* 所有樣式都被包含在my-class中 */
}
</style>
<template>
<div class="my-class">
<!-- dom結構 -->
</div>
</template>