首頁  >  文章  >  web前端  >  Vue中scoped使用步驟解析

Vue中scoped使用步驟解析

php中世界最好的语言
php中世界最好的语言原創
2018-05-21 14:41:552148瀏覽

這次帶給大家Vue中scoped使用步驟解析,Vue中scoped使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

何為scoped?

在vue檔案中的style標籤上,有一個特殊的屬性:scoped。當一個style標籤擁有scoped屬性時,它的CSS樣式就只能作用於目前的組件,也就是說,該樣式只能適用於目前組件元素。透過此屬性,可以使得組件之間的樣式不互相污染。如果一個專案中的所有style標籤全部加上了scoped,相當於實作了樣式的模組化

scoped的實現原理

vue中的scoped屬性的效果主要透過PostCSS轉譯實現,如下是轉譯前的vue程式碼:

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <p class="example">hi</p>
</template>

轉譯後:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p class="example" data-v-5558831a>hi</p>
</template>

即:PostCSS為一個元件中的所有dom增加了一個獨特的動態屬性,然後,給CSS選擇器額外新增一個對應的屬性選擇器來選擇該元件中dom,這種做法使得樣式只作用於含有該屬性的dom-元件內部dom。

為什麼需要穿透scoped?

scoped看起來很美,但是,在許多專案中,會出現這麼一種情況,即:引用了第三方元件,需要在元件中局部修改第三方組件的樣式,而又不想去除scoped屬性造成組件之間的樣式污染。此時只能透過特殊的方式,穿透scoped。

<style scoped>
 外层 >>> 第三方组件 {
  样式
 }
</style>

透過 >>> 可以使得在使用scoped屬性的情況下,穿透scoped,修改其他元件的值。

曲線救國的方法

其實,還擁有一種曲線救國的方法,即在定義一個含有scoped屬性的style標籤之外,再定義一個不含有scoped屬性的style標籤,即在一個vue組件中定義一個全域的style標籤,一個含有作用域的style標籤:

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

此時,你只需要將修改第三方樣式的css寫在第一個style即可。

個人推薦的方法

以上兩種方法,穿透方法實際上違反了scoped屬性的意義,曲線救國的方法又使得程式碼太難看。

個人推薦第三種方法,即:由於scoped看起來很美好,但是含有很多的坑,所以,不推薦不使用scoped屬性,而通過在外層dom上添加唯一的class來區分不同組件。這種方法既實現了類似scoped的效果,又方便修改各種第三方組件的樣式,程式碼看起來也相對舒適。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

webpack建置react開發環境步驟詳解

npm 安裝刪除模組步驟詳解

#

以上是Vue中scoped使用步驟解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn