深度选择器探秘:/deep/、>>>、::v-deep 与 v-deep() 的区别与用法

在Vue.js项目中,尤其是在使用组件化开发时,我们时常需要修改组件内部的样式,但Vue的样式封装特性(如<style scoped>)会阻止外部样式直接作用于组件内部。为了应对这一挑战,Vue社区引入了深度选择器(也称为穿透选择器或阴影穿透选择器),让我们能够跨越组件的封装边界,对内部元素进行样式定制。

本文将详细探讨/deep/>>>::v-deep以及Vue 3 Composition API中的v-deep()的区别与使用方法。

一、深度选择器的概述

深度选择器允许我们从父组件中穿透到子组件内部,直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。

二、深度选择器的区别

1. /deep/
  • Vue 2.x中的用法/deep/是Vue 2.x中用于穿透组件样式封装的一种方式,类似于Sass的 /deep//deep/的别名 ::v-deep(但Vue 2.x官方文档中并未直接提及 ::v-deep)。
  • 兼容性:支持CSS预处理器(如Sass、Less)和CSS原生样式。
  • 注意:在Vue 3.x中, /deep/不再被官方直接支持,虽然一些构建工具或库可能仍然兼容,但推荐使用 ::v-deep
2. >>>
  • CSS原生语法>>>是CSS原生中的深度选择器语法,用于穿透样式封装。但在Vue单文件组件(.vue)中,它并不总是被直接支持,因为Vue会将其视为普通CSS选择器的一部分。
  • 兼容性:仅在某些特定环境(如Webpack的css-loader配置中)和原生CSS中有效,Vue单文件组件中通常需要特定配置才能使用。
  • 注意:在Vue 3.x中, >>>同样不再被推荐使用,应使用 ::v-deep
3. ::v-deep
  • Vue 3.x中的推荐用法::v-deep是Vue 3.x中引入的官方深度选择器,用于替代Vue 2.x中的 /deep/和原生CSS中的 >>>
  • 兼容性:支持CSS预处理器和CSS原生样式,是Vue 3.x中推荐使用的深度选择器。
  • 优点:与Vue 3的其他新特性相兼容,提供了更好的开发体验。
4. v-deep()(Vue 3 Composition API)
  • 特殊用法:在Vue 3的Composition API中,可以通过 v-deep()函数在 <style>标签中动态应用深度选择器。这不是CSS语法的一部分,而是Vue 3特有的模板编译特性。
  • 用法:通常在 <style>标签的 scoped属性下,结合 v-bind:classv-bind:style在模板中动态绑定样式时使用。
  • 示例
    <template><div :class="{'custom-class': true}"><ChildComponent /></div>
    </template><script setup>
    // Composition API 逻辑
    </script><style scoped>
    .custom-class::v-deep(.child-class) {/* 样式规则 */
    }
    /* 或者使用v-deep()函数(虽然不直接在<style>中,但说明其概念) */
    /* 注意:实际中v-deep()不直接用于<style>标签内,而是可能通过其他方式结合Composition API使用 */
    </style>
    
    注意:上面的 v-deep()示例主要是为了说明概念,实际上在 <style>标签内直接使用 v-deep()函数是不支持的。在Composition API中, v-deep()通常与动态样式绑定结合使用,但这更多是在JavaScript层面而非CSS层面。

三、如何使用

Vue 2.x
<style scoped>
.parent /deep/ .child {/* 样式规则 */
}
</style>

或者使用>>>(需要配置支持):

<style scoped>
.parent >>> .child {/* 样式规则 */
}
</style>
Vue 3.x

在Vue 3.x中,推荐使用::v-deep作为深度选择器,因为它既清晰又符合Vue的官方规范。

<template><div class="parent"><ChildComponent /></div>
</template><script setup>
// Composition API 逻辑
</script><style scoped>
.parent::v-deep .child-class {/* 样式规则,这些规则将穿透到ChildComponent内部,并应用于具有.child-class类的元素 */color: blue;font-weight: bold;
}
</style>

在上述例子中,.parent::v-deep .child-class选择器将确保.child-class的样式被应用到<ChildComponent />内部的任何匹配元素上,即使这些元素被<ChildComponent /><style scoped>封装所包围。

关于v-deep()在Composition API中的特殊说明

需要注意的是,v-deep()并不是一个在<style>标签内直接使用的CSS选择器或函数。相反,它的概念更多地与Vue 3的Composition API和动态样式绑定相关。然而,Vue官方并没有直接提供一个名为v-deep()的函数用于在Composition API中处理样式穿透。

在Composition API中处理样式穿透时,你通常会继续使用::v-deep选择器,但可能会通过JavaScript逻辑来动态绑定类名或样式,而不是直接使用一个名为v-deep()的函数。例如,你可以使用v-bind:classv-bind:style来根据组件的状态动态地添加或移除样式类。

结论

  • /deep/>>>在Vue 2.x中用于穿透样式封装,但在Vue 3.x中不再推荐使用。
  • ::v-deep是Vue 3.x中推荐的深度选择器,用于穿透组件的样式封装。
  • v-deep()并不是Vue官方提供的一个函数,用于在 <style>标签内或Composition API中直接处理样式穿透。相反,你应该使用 ::v-deep选择器,并结合Vue的模板和Composition API功能来实现动态样式绑定。

通过正确理解和使用这些深度选择器,你可以更有效地在Vue项目中定制组件样式,而无需修改第三方组件的源代码。

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react Jsx基础概念和本质

什么是jsx jsx是JavaScript和XML(HTML)的缩写&#xff0c;表示在js代码中编写HTML模板结构&#xff0c;它是react中编写UI模板的方式 const message this is message function App(){return (<div><h1>this is title</h1>{message}</div>) } jsx优…

现代物理学概论

现代物理学概论 一、量子纠缠 1、量子力学的基础 波粒二象性&#xff1a;比原子还小的粒子&#xff0c;同时具有两种状态。这些粒子不仅像粒子&#xff0c;也像波。 叠加态&#xff1a;波粒二象性就是一种叠加态、还有自旋、偏振、位置和动量等其他物理性质的叠加态&#x…

Mike she中常出现的error及解决办法

前言&#xff1a; 最近用了下MIKE SHE坡面流模块&#xff0c;感觉一场雨降下来和MIKESHE和MIKE21模块算出来还是有不一样的地方&#xff0c;这个先不聊&#xff0c;聊点直接的&#xff0c;到底一个玩个模块遇到了哪些错误&#xff0c;我们来说说解决方法。 Error1&#xff1a;…

嵌入式人工智能(16-基于树莓派4B的电机控制-步进电机28BYJ-48)

1、步进电机 步进电机是一种旋转电机&#xff0c;通过在特定的步进角度内进行转动来实现精确的定位控制。步进电机通常由电磁线圈和磁轴组成&#xff0c;线圈通过电流激励产生磁场&#xff0c;而磁轴则受到线圈所产生的磁场的作用而转动。 步进电机的运动是离散的&#xff0c;…

el-select选择器修改背景颜色

<!--* FilePath: topSearch.vue* Author: 是十九呐* Date: 2024-07-18 09:46:03* LastEditTime: 2024-07-18 10:42:03 --> <template><div class"topSearch-container"><div class"search-item"><div class"item-name&quo…

野兔在线工具箱系统全新升级改版,基于TP8和yetuadmin后台实现

野兔在线工具箱系统全新升级改版&#xff0c;基于TP8和yetuadmin后台实现 系统名称&#xff1a;野兔在线工具系统 系统语言&#xff1a;支持多语言&#xff0c;大概有20种 系统源码&#xff1a;不加密&#xff0c;开源 系统开发&#xff1a;PHPMySQL (基于thinkphp8&#x…

linux内核中list的基本用法

内核链表 1 list_head 结构 为了使用链表机制&#xff0c;驱动程序需要包含<linux/types.h>头文件&#xff0c;该文件定义了如下结构体实现双向链&#xff1a; struct list_head {struct list_head *next, *prev; };2 链表的初始化 2.1 链表宏定义和初始化 可使用以…

力扣2931.购买物品的最大开销

力扣2931.购买物品的最大开销 因为每次只会取最右边数 最右边数一定会是最小的把所有数放到一个数组里排序每次取最小即可 class Solution {public:long long maxSpending(vector<vector<int>>& values) {int m values.size(),n values[0].size();vector&…

无刷电机数学模型建立之——克拉克变换

前言 MOS管如何驱动无刷电机&#xff0c;请参考如下链接 无刷电机概念与原理 一、FOC流程图 二、FOC的过程是输入需求的电机力矩&#xff0c;最后把需求的电机力矩转换为三相线的电力输出&#xff0c;并且让电机旋转物理上输出需求的力矩的过程&#xff0c;这也称为电机控制三…

钡铼分布式I/O系统边缘计算Modbus,MQTT,OPC UA耦合器BL206

BL206系列耦合器是一个数据采集和控制系统&#xff0c;基于强大的32 位微处理器设计&#xff0c;采用Linux操作系统&#xff0c;支持Modbus&#xff0c;MQTT&#xff0c;OPC UA协议&#xff0c;可以快速接入现场PLC、DCS、PAS、MES、Ignition和SCADA以及ERP系统&#xff0c;同时…

通过vue3 + TypeScript + uniapp + uni-ui 实现下拉刷新和加载更多的功能

效果图: 核心代码: <script lang="ts" setup>import { ref, reactive } from vue;import api from @/request/api.jsimport empty from @/component/empty.vueimport { onLoad,onShow, onPullDownRefresh, onReachBottom } from @dcloudio/uni-applet form …

cannot import name ‘OrderedDict‘ from ‘typing‘

** cannot import name ‘OrderedDict’ from ‘typing’ ** 这个错误&#xff0c;问题一般在maxvit.py文件&#xff0c;我的路径&#xff1a;D:\Coding\Anaconda\Anaconda\envs\CNN-flower\Lib\site-packages\torchvision\models\maxvit.py 一般就是在项目文件夹下的这个路…

谷粒商城——session共享

问题1 一个系统中不同微服务的session共享。 问题1的解决办法 1. session复制的方法&#xff1a;微服务的副本之间通过通信共享session。这样每一个微服务的副本都会保存所有的session。&#xff08;缺点&#xff1a;造成大量的通信&#xff0c;多处额外的通信开销。&#x…

【Android】Activity的生命周期

Activity的生命周期 1.返回栈 其实Android是使用任务&#xff08;task&#xff09;来管理Activity的&#xff0c;一个任务就是一组存放在栈里的Activity的集合&#xff0c;这个栈也被称作返回栈&#xff08;back stack&#xff09;。栈是一种后进先出的数据结构&#xff0c;在…

Oracle开发和应用——PL/SQL语法4(例外处理)

6.4.8. 例外处理 1)概念 所谓例外(exception),就是程序中发生的意外情况,例如:程序体部分代码发生的各种报错等。 2)顺序 PL/SQL中,例外总是首先被目前程序块的例外部分捕捉和处理。如果当前程序块不存在相应例外处理,则会继续传播到下一层程序块。如果还是没发现相…

AES算法概述

文章目录 一、AES 概述二、AES 加密算法的特点三、秘钥类型四、填充方式五、加密方式 一、AES 概述 二、AES 加密算法的特点 AES加密的数据块长度为128&#xff08;16字节&#xff09;&#xff0c;长度不足需要填充。密码长度可以为16,24,32字节。 三、秘钥类型 AES加密按秘…

【C++高阶】精通AVL树:全面剖析与深度学习

目录 &#x1f680; 前言一&#xff1a; &#x1f525; AVL树的性质二&#xff1a; &#x1f525; AVL树节点的定义三&#xff1a; &#x1f525; AVL树的插入四&#xff1a; &#x1f525; AVL树的平衡调整&#xff08;附动图&#xff09; 五&#xff1a;&#x1f525; AVL树的…

c++初阶篇(三):内联函数及auto关键字

1.内联函数 1.1 概念 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函数调 用建立栈帧的开销&#xff0c;内联函数提升程序运行的效率。 如果在上述函数前增加 inline 关键字将其改成内联函数&#xff0c;在编译期间编…

使用winget安装git

Winget 是 Windows 包管理器&#xff0c;是微软开发的一个命令行工具&#xff0c;它允许用户通过命令行界面来发现、安装、升级、配置和卸载 Windows 10 和 Windows 11 上的应用程序。 Winget 旨在提供一种更加高效和统一的方式来管理 Windows 上的软件包。它支持 Windows 10 …

RNN循环递归网络讲解与不掉包python实现

这里写目录标题 1.算法简介2. RNN算法原理2.1 RNN基本结构介绍2.2 计算流程 3.完整训练代码 1.算法简介 参考论文&#xff1a;Elman J L. Finding structure in time[J]. Cognitive science, 1990, 14(2): 179-211.&#xff0c;谷歌被引次数超16000! 说到循环递归结构就不得不…