之前在項目中用到了 vant，使用特別簡單，而且組建也非常的豐富。即時這樣，在項目中肯定也需要用額外的樣式來打造自己的應用。直接在 <style lang="scss" scoped> .... </style> 中編寫的話只會影響當前組件內的樣式，但如果去掉scoped話又會影響全局樣式。想了好多方法，都沒得到很好的解決。
百度之后發現 可以用 /deep/或::v-deep來解決***（不過在vue3.0的環境下，使用/deep/時，編譯會報錯）***。沒想到官方文檔中其實早就給出了解決方案，怪自己沒有認真看過文檔，對vue的掌握還是不夠熟悉啊，得好好學習了。
深度作用選擇器
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：<style scoped> .a >>> .b { /* ... */ } </style> 上述代碼將會編譯成：.a[data-v-f3f3eg9] .b { /* … */ }
有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。
1、>>>
如果vue的style使用的是css，那么則
|
1
2
3
4
5
|
<style lang=
"css"
scoped>
.a >>> .b {
/* ... */
}
</style>
|
但是像scss等預處理器卻無法解析>>>，所以我們使用下面的方式.
2、/deep/
|
1
2
3
4
5
6
7
|
<style lang=
"scss"
scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
|
但是有些開發者反應，在vue-cli3編譯時，deep的方式會報錯或者警告。
此時我們可以使用第三種方式
3、::v-deep
切記必須是雙冒號
|
1
2
3
4
5
6
7
|
<style lang=
"scss"
scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
|
使用場景:
當我們需要覆蓋element-ui中的樣式時只能通過深度作用選擇器
style為css時的寫法如下
|
1
2
3
|
.a >>> .b {
***
}
|
style使用css的預處理器(less, sass, scss)的寫法如下
第一種/deep/
|
1
2
3
|
/deep/ .a {
***
}
|
第二種::v-deep
|
1
2
3
|
::v-deep .a{
***
}
|
建議使用第二種方式,/deep/在某些時候會報錯,::v-deep更保險並且編譯速度更快.