1.什麼是scoped
在Vue文件中的style標籤上有一個特殊的屬性,scoped。當一個style標籤擁有scoped屬性時候,它的css樣式只能用於當前的Vue組件,可以使組件的樣式不相互污染。如果一個項目的所有style標籤都加上了scoped屬性,相當於實現了樣式的模塊化。
2.scoped的實現原理
Vue中的scoped屬性的效果主要是通過PostCss實現的。以下是轉譯前的代碼:
<style scoped lang="less">
.example{
color:red;
}
</style>
<template>
<div class="example">scoped測試案例</div>
</template>
轉譯後:
.example[data-v-5558831a] {
color: red;
}
<template>
<div class="example" data-v-5558831a>scoped測試案例</div>
</template>
既:PostCSS給一個組件中的所有dom添加了一個獨一無二的動態屬性,給css選擇器額外添加一個對應的屬性選擇器,來選擇組件中的dom,這種做法使得樣式只作用於含有該屬性的dom元素(組件內部的dom)。
總結:scoped的渲染規則:
給HTML的dom節點添加一個不重複的data屬性(例如: data-v-5558831a)來唯一標識這個dom 元素在每句css選擇器的末尾(編譯後生成的css語句)加一個當前組件的data屬性選擇器(例如:[data-v-5558831a])來私有化樣式。
3.scoped穿透
scoped看起來很好用,當時在Vue項目中,當我們引入第三方組件庫時(如使用vue-awesome-swiper實現移動端輪播),需要在局部組件中修改第三方組件庫的樣式,而又不想去除scoped屬性造成組件之間的樣式覆蓋。這時我們可以通過特殊的方式穿透scoped。
sass和less的樣式穿透 使用/deep/
外層 /deep/ 第三方組件 {
樣式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}
舉例:
<style rel="stylesheet/scss" scope>
.wrapper /deep/ .el-dialog__body{
padding-bottom: 0px !important;
}
</style>
在需要添加樣式的組件上添加class=wrapper
。
3.在組件中修改第三方組件庫樣式的其它方法
上面我們介紹了在使用scoped 屬性時,通過scopd穿透的方式修改引入第三方組件庫樣式的方法,下面我們介紹其它方式來修改引入第三方組件庫的樣式
- 在vue組件中不使用scoped屬性
- 在vue組建中使用兩個style標籤,一個加上scoped屬性,一個不加scoped屬性,把需要覆蓋的css樣式寫在不加scoped屬性的style標籤裏
- 建立一個reset.css(基礎全局樣式)文件,裏面寫覆蓋的css樣式,在入口文件main.js 中引入