vue3中的:deep()深度選擇器詳解
更新時間：2024年10月26日 10:10:54 作者：龍井>_<
本文講述了"v-deep"深度選擇器被廢棄的情況,作者提醒讀者更新知識庫,避免誤導他人,深度選擇器是HTML5的新屬性,用于實現(xiàn)組件私有化和防止樣式污染,如果想讓樣式中的一個選擇器作用得更深,可以使用深度選擇器,但現(xiàn)在,以前的寫法已不再支持,需要調整方法
今天看到這篇文章被GitCode收錄，才發(fā)覺原來::v-deep已經被廢棄了，以前辛苦學習的時光還歷歷在目，如今卻已是時過境遷。所以更新一下文章，防止誤導他人。
1.什么是深度選擇器？
scoped 屬性是HTML5中的新屬性，<style>標簽在加上了scoped屬性時，樣式實現(xiàn)組件私有化，父組件的樣式不會滲透到子組件，不會造成局部或全局的污染。這個時候如果你想讓樣式中的一個選擇器作用得更深（滲透到子組件），可以使用深度選擇器:v-deep。
2.舉個栗子
在<style>中加了scoped屬性后，子組件的內部元素不會自動增加 data-v-xxxx屬性，我們直接修改element按鈕里的文字樣式時，這樣寫并不能生效，除非去掉scoped。
<template>
<el-row class="mb-4">
<el-button>按鈕</el-button>
</el-row>
</template>
<style lang="scss" scoped>
.el-button>span {
color: red;
}
</style>
使用:deep，即可解決這個問題
<template>
<el-row class="mb-4">
<el-button>按鈕</el-button>
</el-row>
</template>
<style lang="scss" scoped>
:deep(.el-button>span) {
color: red;
}
</style>
以前的寫法，現(xiàn)在已不支持：
>>> .el-button>span {
color: red;
}
::deep(.el-button>span){
color:red;
}不支持的寫法會報錯：
到此這篇關于vue3中的:deep()深度選擇器的文章就介紹到這了,更多相關vue3 :deep()深度選擇器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了vue保存自動格式化換行，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了Vue3異步組件Suspense的使用方法詳解,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了VUE中的filters過濾器使用方法，文章主要通過描述全局過濾器、全局過濾器之單一掛載、全局過濾器之批量掛載?、組件過濾器展開內容，具有一定的參考價值組要的小伙伴可以參考一下2022-03-03
Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式
這篇文章主要介紹了Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,眾所周知echarts是非常強大的插件,所以這篇文章主要給大家介紹了關于vue+echarts圖表使用的相關資料,需要的朋友可以參考下2021-09-09
Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)
這篇文章主要介紹了Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了基于VUE實現(xiàn)的九宮格抽獎功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07