vue樣式穿透 ::v-deep的具體使用
之前在項目中用到了 vant，使用特別簡單，而且組建也非常的豐富。即時這樣，在項目中肯定也需要用額外的樣式來打造自己的應(yīng)用。直接在 <style lang="scss" scoped> .... </style> 中編寫的話只會影響當前組件內(nèi)的樣式，但如果去掉scoped話又會影響全局樣式。想了好多方法，都沒得到很好的解決。
百度之后發(fā)現(xiàn) 可以用 /deep/或::v-deep來解決***（不過在vue3.0的環(huán)境下，使用/deep/時，編譯會報錯）***。沒想到官方文檔中其實早就給出了解決方案，怪自己沒有認真看過文檔，對vue的掌握還是不夠熟悉啊，得好好學習了。
深度作用選擇器
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
<style scoped> .a >>> .b { /* ... */ } </style>
上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* … */ }
有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。
1、>>>
如果vue的style使用的是css，那么則
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
但是像scss等預(yù)處理器卻無法解析>>>，所以我們使用下面的方式.
2、/deep/
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
但是有些開發(fā)者反應(yīng)，在vue-cli3編譯時，deep的方式會報錯或者警告。
此時我們可以使用第三種方式
3、::v-deep
切記必須是雙冒號
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
使用場景:
當我們需要覆蓋element-ui中的樣式時只能通過深度作用選擇器
style為css時的寫法如下
.a >>> .b {
***
}
style使用css的預(yù)處理器(less, sass, scss)的寫法如下
第一種/deep/
/deep/ .a {
***
}
第二種::v-deep
::v-deep .a{
***
}
建議使用第二種方式,/deep/在某些時候會報錯,::v-deep更保險并且編譯速度更快.
到此這篇關(guān)于vue樣式穿透 ::v-deep的具體使用的文章就介紹到這了,更多相關(guān)vue ::v-deep內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3導入Elementplus時組件無法加載的情況及解決
這篇文章主要介紹了Vue3導入Elementplus時組件無法加載的情況及解決方案,具有很好的參考價值,希望對大家有所幫助2024-03-03
這篇文章主要介紹了Vue 頁面權(quán)限控制和登陸驗證功能的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Vue elementUI 自定義表單模板組件功能實現(xiàn)
在項目開發(fā)中，我們會遇到這種需求，在管理后臺添加自定義表單，在指定的頁面使用定義好的表單，這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)簡單的信號和電池電量組件效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
vue中使用echarts繪制雙Y軸圖表時刻度沒有對齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時，刻度沒有對齊的兩種解決方法,主要原因是因為刻度在顯示時，分割段數(shù)不一樣，導致左右的刻度線不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了VUE使用draggable實現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3+ts項目搭建的實現(xiàn)示例,本文目的在于記錄自己項目框架搭建的過程,通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
這篇文章主要介紹了vue表格(table)計算總計方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在Vue3.x中實現(xiàn)類似React.lazy效果的方法詳解
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實際需要時再進行,雖然 Vue3.x 沒有一個直接對應(yīng)的 lazy 函數(shù),但我們可以通過動態(tài)導入和 defineAsyncComponent 方法來實現(xiàn)類似的效果,需要的朋友可以參考下2024-03-03