快捷導(dǎo)航

vue中各種deep的區(qū)別解析

更新時(shí)間：2024年10月12日 10:59:28 作者：蠟筆大杺

在Vue3中,推薦使用::deep作為深度選擇器,它比Vue2中的::v-deep語(yǔ)法更簡(jiǎn)潔,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透組件作用域的選擇器,但Vue3更傾向于使用::deep或:deep(),感興趣的朋友跟隨小編一起看看吧

1. ::v-deep

::v-deep 是 Vue 2 中引入的深度選擇器，在 Vue 3 中仍然可用，但不再是推薦的寫法。它用于穿透作用域，將樣式應(yīng)用到子組件的元素上。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
<style scoped>
.parent ::v-deep .child-class {
  color: red;
}
</style>

2. ::deep

::deep 是 Vue 3 中推薦的深度選擇器。它與 ::v-deep 功能相同，但語(yǔ)法更簡(jiǎn)潔。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
<style scoped>
.parent ::deep .child-class {
  color: red;
}
</style>

3. :deep()

:deep() 是 Vue 3 中推薦的另一種深度選擇器。它是一個(gè)偽類，可以嵌套在其他選擇器中使用，提供了更靈活的語(yǔ)法。

示例

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
<style scoped>
.parent :deep(.child-class) {
  color: red;
}
</style>

4 . >>>

在早期版本的Vue.js中，>>> 也被用來作為深度選擇器。它的用法與 ::v-deep 類似，但是現(xiàn)在已經(jīng)被 ::v-deep 或 ::deep 所取代。
示例：

.parent-class >>> .child-class {
  color: blue;
}

5. /deep/

/deep/ 也是早期Vue.js版本中的一個(gè)深度選擇器。不過，隨著Vue 2.6.0的發(fā)布，官方建議使用 ::v-deep 替代 /deep/。在某些情況下，特別是在使用某些構(gòu)建工具或配置時(shí)，/deep/ 可能仍然有效，但并不推薦繼續(xù)使用。
示例：

.parent-class /deep/ .child-class {
  color: green;
}

到此這篇關(guān)于vue中各種deep的區(qū)別的文章就介紹到這了,更多相關(guān)vue deep區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
deep

相關(guān)文章

基于Vue3+ts封裝一個(gè)簡(jiǎn)單版的Message組件
近日項(xiàng)目中需要使用信息提示框的功能,ui組件庫(kù)使用的是字節(jié)的arco-design-vue,看了一下,現(xiàn)有的Message不滿足要是需求,直接使用message組件的話,改樣式太麻煩,所以本文就本就介紹了基于Vue3+ts封裝一個(gè)簡(jiǎn)單版的Message組件,需要的朋友可以參考下
2023-09-09
Vue下載Excel后報(bào)錯(cuò),或打不開的解決
這篇文章主要介紹了Vue下載Excel后報(bào)錯(cuò),或打不開的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue中img標(biāo)簽的src屬性總結(jié)(問題解決)
初步接觸vue框架時(shí),好多朋友使用img標(biāo)簽時(shí),設(shè)置動(dòng)態(tài)src屬性時(shí),可能都會(huì)遇到路徑不生效的問題,本文給大家介紹vue中img標(biāo)簽的src屬性總結(jié),感興趣的朋友一起看看吧
2023-11-11
ElementUI中el-input無法輸入、修改及刪除問題解決辦法
這篇文章主要給大家介紹了關(guān)于ElementUI中el-input無法輸入、修改及刪除問題的解決辦法,這種問題產(chǎn)生是因?yàn)閕nput在vue中的受控,我們需要去重新改變一下監(jiān)聽和實(shí)現(xiàn),需要的朋友可以參考下
2023-11-11
基于Vue3創(chuàng)建一個(gè)簡(jiǎn)單的倒計(jì)時(shí)組件
這篇文章主要給大家介紹了基于Vue3創(chuàng)建一個(gè)簡(jiǎn)單的倒計(jì)時(shí)組件的代碼示例,文中通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2023-11-11
解決VUE框架導(dǎo)致綁定事件的阻止冒泡失效問題
下面小編就為大家分享一篇vue監(jiān)聽滾動(dòng)事件實(shí)現(xiàn)某元素吸頂或者固定位置顯示方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明
這篇文章主要介紹了Vue中data傳遞函數(shù)、props接收函數(shù)及slot傳參的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue3兄弟組件傳值之mitt的超詳細(xì)講解
之前只是淺顯的使用插件進(jìn)行vue開發(fā)展示,最近深入的研究了下,下面這篇文章主要給大家介紹了關(guān)于Vue3兄弟組件傳值之mitt的超詳細(xì)講解,需要的朋友可以參考下
2022-06-06
vue前端如何向后端傳遞參數(shù)
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06