Vue中的scoped及穿透方法

盼你歸來_仍是少年發表於2019-04-17
Vue穿透

scoped的由來

css一直有個令人困擾的作用域問題：即使是模組化程式設計下，在對應的模組的js中import css進來，這個css仍然是全域性的。為了避免css樣式之間的汙染，vue中引入了scoped這個概念。

在vue檔案中的style標籤上，有一個特殊的屬性：scoped。當一個style標籤擁有scoped屬性時，它的CSS樣式就只能作用於當前的元件。通過設定該屬性，使得元件之間的樣式不互相汙染。如果一個專案中的所有style標籤全部加上了scoped，相當於實現了樣式的模組化。

但是這些樣式又是如何實現不相互影響呢？

scoped的原理

vue中的scoped 通過在DOM結構以及css樣式上加唯一不重複的標記:data-v-hash的方式，以保證唯一（而這個工作是由過PostCSS轉譯實現的），達到樣式私有化模組化的目的。

總結一下scoped三條渲染規則：

  1. 給HTML的DOM節點加一個不重複data屬性(形如：data-v-19fca230)來表示他的唯一性
  2. 在每句css選擇器的末尾（編譯後的生成的css語句）加一個當前元件的data屬性選擇器（如[data-v-19fca230]）來私有化樣式
  3. 如果元件內部包含有其他元件，只會給其他元件的最外層標籤加上當前元件的data屬性

上個栗子。轉譯前：

<style lang="scss" scoped>
    .test {
        background: blue;
        span{
            color:red;
        }
    }
</style>
<template>
    <div class="test">
        <span>hello world !</span>
    </div>
</template>
複製程式碼

轉譯後：

<style lang="css">
    .test[data-v-ff86ae42] {
        background: blue;
    }
    .test span[data-v-ff86ae42]{
        color: red;
    }
</style>
<template>
    <div class="test" data-v-ff86ae42>
        <span data-v-ff86ae42>hello world !</span>
    </div>
</template>
複製程式碼

可以看出：PostCSS會給一個元件中的所有dom新增了一個獨一無二的動態屬性data-v-xxxx，然後，給CSS選擇器額外新增一個對應的屬性選擇器來選擇該元件中dom，這種做法使得樣式只作用於含有該屬性的dom——元件內部dom, 從而達到了'樣式模組化'的效果.

穿透scoped

但是，在做專案中，會遇到這麼一個問題，即：引用了第三方元件，需要在元件中區域性修改第三方元件的樣式，而又不想去除scoped屬性造成元件之間的樣式汙染。那麼有哪些解決辦法呢？

  1. 不使用scoped 省略（個人不推薦）
  2. 在模板中使用兩次style標籤：
<style lang="scss">
    /*新增要覆蓋的樣式*/
</style>
<style lang="scss" scoped>
    /* local styles */
</style>
<!--vue官網中提到：一個 .vue 檔案可以包含多個style標籤。所以上面的寫法是沒有問題的。-->
複製程式碼
  1. 穿透scoped >>>
<template>
  <div class="box">
    <dialog></dialog>
  </div>
</template>
<!--使用 >>>或者 /deep/ 操作符（Sass 之類的前處理器無法正確解析 >>>，可以使用/deep/）-->
<style lang="scss" scoped>
.box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>
或者
<style lang="scss" scoped>
.box >>> input {
    width: 166px;
    text-align: center;
  }
}
</style>
複製程式碼

希望能幫助遇到同樣問題的你，thanks!

相關文章