一、CSS作用域（樣式分割）的使用

在vue中，讓css樣式只在當前組件中生效：scoped 屬性是 HTML5 中的新屬性，是一個布爾屬性，如果使用該屬性，則樣式僅僅應用到 style 元素的父元素及其子元素。

二、scoped的實現(xiàn)原理

vue中的scoped屬性的效果主要通過PostCSS轉(zhuǎn)譯實現(xiàn)，如下是轉(zhuǎn)譯前的vue代碼：

  <style scoped>
    .test {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test">Hi world</div>
  </template>

轉(zhuǎn)譯后：

  <style>
    .test[data-v-5559930f] {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test" data-v-5559930f>Hi world</div>
  </template>

PostCSS給一個組件中的所有DOM添加一個獨一無二的動態(tài)屬性，然后，給CSS選擇器額外添加一個對應的屬性選擇器來選擇該組件中的DOM，這種做法使得樣式只作用于含有該屬性的DOM<組件內(nèi)部DOM>。

三、scoped穿透方法

在很多項目中，當引用第三方組件，需要再組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。這時就需要采用一些特殊的方式來進行穿透scoped。

方法一： 使用>>>可以穿透scoped屬性，修改其他第三方組件樣式。

方法二： 使用兩個style標簽，一個帶scoped屬性，一個不帶scoped屬性，用來修改第三方組件的樣式。

方法三： 使用sass或less的樣式穿透 /deep/

方法四： 通過在最外層加 id或者 class的形式進行區(qū)分。

到此這篇關(guān)于CSS作用域（樣式分割）的文章就介紹到這了,更多相關(guān)CSS作用域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論