理解Vue中的scoped實現原理及穿透方法

理解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

1. 父組件無scoped屬性，子組件帶有scoped，父組件是沒法操做子組件的樣式的（緣由在原理中可知），雖然咱們能夠在全局中經過該類標籤的標籤選擇器設置樣式，但會影響到其餘組件
2. 父組件有scoped屬性，子組件無，父組件也沒法設置子組件樣式，由於父組件的全部標籤都會帶有data-v-469af010惟一標誌，但子組件不會帶有這個惟一標誌屬性，與1同理，雖然咱們能夠在全局中經過該類標籤的標籤選擇器設置樣式，但會影響到其餘組件
3. 父子組建都有，同理也沒法設置樣式，更改起來增長代碼量

解決方法

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>

1. 使用兩個style標籤

demo.vue

<style>
/* 用於修改第三方庫的樣式 */
</style>
 
<style scoped>
/* 本身的組件內樣式 */
</style>

1. 添加class

經過在外層dom上添加惟一的class來區分不一樣組件。這種方法既實現了相似於scoped的效果，又方便修改各類第三方組件的樣式，代碼看起來也相對溫馨。

demo.vue

<style>
.my-class {
 color: red;
 /* 全部樣式都被包含在my-class中 */
}
</style>
<template>
 <div class="my-class">
 <!-- dom結構 -->
 </div>
</template>

參考

Vue中的scoped實現原理及穿透方法

vue中scoped的原理及慎用緣由

Vue中的scoped和scoped穿透