詳解Vue中的scoped及穿透方法

更新時(shí)間：2019年04月18日 10:22:33 作者：盼你歸來_仍是少年

這篇文章主要介紹了Vue中的scoped及穿透方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

scoped的由來

css一直有個(gè)令人困擾的作用域問題：即使是模塊化編程下，在對(duì)應(yīng)的模塊的js中import css進(jìn)來，這個(gè)css仍然是全局的。為了避免css樣式之間的污染，vue中引入了scoped這個(gè)概念。

在vue文件中的style標(biāo)簽上，有一個(gè)特殊的屬性：scoped。當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)，它的CSS樣式就只能作用于當(dāng)前的組件。通過設(shè)置該屬性，使得組件之間的樣式不互相污染。如果一個(gè)項(xiàng)目中的所有style標(biāo)簽全部加上了scoped，相當(dāng)于實(shí)現(xiàn)了樣式的模塊化。

但是這些樣式又是如何實(shí)現(xiàn)不相互影響呢？

scoped的原理

vue中的scoped 通過在DOM結(jié)構(gòu)以及css樣式上加唯一不重復(fù)的標(biāo)記:data-v-hash的方式，以保證唯一（而這個(gè)工作是由過PostCSS轉(zhuǎn)譯實(shí)現(xiàn)的），達(dá)到樣式私有化模塊化的目的。

總結(jié)一下scoped三條渲染規(guī)則：

給HTML的DOM節(jié)點(diǎn)加一個(gè)不重復(fù)data屬性(形如：data-v-19fca230)來表示他的唯一性
在每句css選擇器的末尾（編譯后的生成的css語句）加一個(gè)當(dāng)前組件的data屬性選擇器（如[data-v-19fca230]）來私有化樣式
如果組件內(nèi)部包含有其他組件，只會(huì)給其他組件的最外層標(biāo)簽加上當(dāng)前組件的data屬性

上個(gè)栗子。轉(zhuǎn)譯前：

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

轉(zhuǎn)譯后：

<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會(huì)給一個(gè)組件中的所有dom添加了一個(gè)獨(dú)一無二的動(dòng)態(tài)屬性data-v-xxxx，然后，給CSS選擇器額外添加一個(gè)對(duì)應(yīng)的屬性選擇器來選擇該組件中dom，這種做法使得樣式只作用于含有該屬性的dom——組件內(nèi)部dom, 從而達(dá)到了'樣式模塊化'的效果.

穿透scoped

但是，在做項(xiàng)目中，會(huì)遇到這么一個(gè)問題，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。那么有哪些解決辦法呢？

不使用scoped 省略（個(gè)人不推薦）
在模板中使用兩次style標(biāo)簽：

<style lang="scss">
  /*添加要覆蓋的樣式*/
</style>
<style lang="scss" scoped>
  /* local styles */
</style>
<!--vue官網(wǎng)中提到：一個(gè) .vue 文件可以包含多個(gè)style標(biāo)簽。所以上面的寫法是沒有問題的。-->

穿透scoped >>>

<template>
 <div class="box">
  <dialog></dialog>
 </div>
</template>
<!--使用 >>>或者 /deep/ 操作符（Sass 之類的預(yù)處理器無法正確解析 >>>，可以使用/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!

以上所述是小編給大家介紹的Vue中的scoped及穿透方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: