vue3中的:deep()深度選擇器詳解
今天看到這篇文章被GitCode收錄，才發(fā)覺原來::v-deep已經(jīng)被廢棄了，以前辛苦學(xué)習(xí)的時(shí)光還歷歷在目，如今卻已是時(shí)過境遷。所以更新一下文章，防止誤導(dǎo)他人。
1.什么是深度選擇器？
scoped 屬性是HTML5中的新屬性，<style>標(biāo)簽在加上了scoped屬性時(shí)，樣式實(shí)現(xiàn)組件私有化，父組件的樣式不會(huì)滲透到子組件，不會(huì)造成局部或全局的污染。這個(gè)時(shí)候如果你想讓樣式中的一個(gè)選擇器作用得更深（滲透到子組件），可以使用深度選擇器:v-deep。
2.舉個(gè)栗子
在<style>中加了scoped屬性后，子組件的內(nèi)部元素不會(huì)自動(dòng)增加 data-v-xxxx屬性，我們直接修改element按鈕里的文字樣式時(shí)，這樣寫并不能生效，除非去掉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，即可解決這個(gè)問題
<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;
}不支持的寫法會(huì)報(bào)錯(cuò)：
到此這篇關(guān)于vue3中的:deep()深度選擇器的文章就介紹到這了,更多相關(guān)vue3 :deep()深度選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue多層嵌套路由,結(jié)合實(shí)例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報(bào)錯(cuò)解決方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題)
項(xiàng)目全線使用vue3的時(shí)候,自然使用的是配套更加契合的vite打包工具,于是自然而然會(huì)用到很多新的語(yǔ)法,本文給大家介紹了vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題),需要的朋友可以參考下2024-04-04
elementUI自定義上傳文件功能實(shí)現(xiàn)(前端后端超詳細(xì)過程)
自定義上傳思路很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于elementUI自定義上傳文件功能實(shí)現(xiàn)(前端后端超詳細(xì)過程)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
vue計(jì)算屬性+vue中class與style綁定(推薦)
這篇文章主要介紹了vue計(jì)算屬性+vue中class與style綁定,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
vue的過濾器通常用在一些常見的文本格式化，過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
用v-html解決Vue.js渲染中html標(biāo)簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標(biāo)簽不能被解析，html標(biāo)簽顯示為字符串的問題，文中通過圖文介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12