v-deep 打破作用域隔离的原理

vue 中使用 scoped 样式隔离

使用 ::v-deep 和 >>> ,穿透作用域样式,以便在父组件中修改子组件的样式,即打破样式隔离。

vue 使用了一种叫做 scoped css 的技术来隔离组件的样式,确保他们不会泄漏到其他组件中,每个 Vue 组件的样式只在该组件的作用域内生效,不会影响到其他组件,而 v-deep 可以打破这样的样式隔离。

 v-deep 的原理是,vue 渲染是移除这些选择器,从而使得被选中的样式能够影响到子组件内部的元素,这样以来,父组件就可以通过 v-deep 选择器修改子组件的样式,即时他们被包裹到作用域样式中。

原理如下

  1. 编译时处理:在 vue 组件的编译过程中,vue 会解析模版中的样式,并将作用域样式转换成一种特殊的选择器,以确保样式仅在当前组件的作用域内生效。这种转换通常涉及到在选择器中添加一个唯一的标识符,例如一个哈希值,以确保样式只影响当前组件内的元素。
     
  2. 移除选择器:当遇到v-deep选择器是,vue 在渲染组件时会将这些选择器从样式表中移除,而不是将他们应用到 DOM 上,这意味着,被标记为 v-deep 的选择器在实际渲染时不会起作用,因此不会影响 DOM 结构
  3. 实现穿透样式:尽管在渲染时移除了v-deep 选择器,但在生成的样式表中,这些选择器仍然会存在。当浏览器解析 css 样式表时,它会忽略这些特殊选择器,因为它们不符合CSS规范。但是,由于Vue已经在编译时对样式表进行了处理,所以实际上,::v-deep>>>选择器已经生效了,允许父组件的样式影响到子组件的元素。
  4. 修改子组件样式: 因此,通过使用::v-deep>>>选择器,父组件可以选择子组件中的元素,并修改它们的样式,即使子组件的样式已经被作用域样式所隔离。

总的来说,Vue在编译时处理::v-deep>>>选择器,移除它们以确保不会影响到实际的DOM结构,但在样式表中仍然保留了这些选择器,使得它们在浏览器解析CSS时可以生效,从而实现了穿透样式的效果。

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

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

相关文章

spring-core:注解合成(AnnotationUtils.synthesizeAnnotation)的使用示例

spring-core提供的AnnotationUtils工具功能很强大,也很灵活,其中的synthesizeAnnotation方法我一起没搞明白它的使用场景,直到今天我的工作用上了它,学会它的使用。 synthesizeAnnotation方法说明: 通过将包含了注解字…

网工内推 | 14薪!安全服务工程师,上市公司,CISP认证优先

01 远江盛邦 招聘岗位:安全服务工程师 职责描述: 1、负责对客户网络、系统进行渗透测试,漏洞验证、安全评估和安全加固; 2、负责对监督单位的系统安全问题进行监督,并督察改进; 3、对监管单位的安全告警、…

力扣136. 只出现一次的数字

Problem: 136. 只出现一次的数字 文章目录 题目描述思路复杂度Code 题目描述 思路 由于题目要求使用线性时间复杂度和常量级的空间复杂度,再加上找重复元素这个特性,我们可以想到使用位运算来求解: 1.任何数与其本身异或得0,任何…

我的创作纪念日20240418

机缘 我的技术博客起源于对编程的深深热爱和对知识的渴望。从一开始,我就被编程世界的无限可能所吸引,而这种热情也推动我开始了技术创作之旅。我创建博客的初衷有以下几点: 分享实战经验:在工作中,我遇到了许多技术…

HackMyVM-BaseME

目录 信息收集 arp nmap WEB web信息收集 gobuster hydra 目录检索 ssh 提权 get user sudo base64提权 get root 信息收集 arp ┌─[rootparrot]─[~/HackMyVM] └──╼ #arp-scan -l Interface: enp0s3, type: EN10MB, MAC: 08:00:27:16:3d:f8, IPv4: 192.168…

go语言context

context在服务端编程基本都贯穿所有, Context 是请求的上下文信息。对于RPC Server来说,一般每接收一个新的请求,会产生一个新的Context,在进行内部的函数调用的时候,通过传递Context,可以让不同的函数、协…

Flowable工作流引擎:Spring Boot集成指南

Flowable工作流引擎:Spring Boot集成指南 前言开始集成相关配置文件pom文件 前言 在快速变化的软件开发世界中,工作流管理成为了企业应用不可或缺的组成部分。无论是简化复杂业务流程、提升操作效率还是确保流程的一致性和透明性,一个强大的…

python二级题目-仅使用 Python 基本语法,即不使用任何模块,编写 Python 程序计算下列数学表达式的结果并输出,小数点后保留 3 位。

x(((3**4)5*(6**7))/8)**0.5 .format 用法一: print({}.format(1)) 1 print(这个是format的用法{}。。。.format(3)) 这个是format的用法3 ’大括号1:{},大括号2:{},大括号3:{}‘.format(3,4,5) print(’大括号1:{},大括号2:{},大括号3:{}‘.form…

牛客小白月赛90(A,B,C,D,E,F)

比赛链接 官方题解(视频) 这场偏思维,感觉好像没啥算法。E需要动态维护前 k k k 小,F是个离散化加dp,状态和递推方程比较 非常规,建议还是看一下涨涨姿势。 A 小A的文化节 思路: 签到 cod…

hive使用sqoop与oracle传输数据

下载地址 http://archive.apache.org/dist/sqoop 两个版本sqoop1(1.4.x)和sqoop2(1.99.x),两种不同的架构。 本文使用sqoop1。 sqoop是apache旗下一款“hadoop与关系数据库之间传送数据”的工具。 导入数据&#xf…

5374: 【数学】最后一击

题目描述 小爱和小艾两人组队打一只怪兽。一开始怪兽有 n 点生命值,当 n 变成 0 或更低时,怪兽就被消灭了。他们两人是同时开始攻击的,小爱每分钟可以攻击 a 下,小艾每分钟可以攻击 b 下。若 a2,b4,则小爱…

深圳市第六批专精特新“小巨人”企业申报和第三批专精特新“小巨人”企业申报开始了

各区(新区、特别合作区)相关工作部门,各企业: 根据《工业和信息化部办公厅关于开展第六批专精特新“小巨人”企业培育和第三批专精特新“小巨人”企业复核工作的通知》(工信厅企业函〔2024〕142号)要求&…

中仕公考:2024年广东省高校毕业生‘三支一扶‘公告

2024年广东省三支一扶共计划招募3000名左右高校毕业生,服务期限为两年,具体招募岗位和条件可通过广东人事考试网查询。 招考条件: 年龄不超过30周岁(1993年4月22日后出生); 支教岗位须是已取得教师资格证的高校毕业生,支医专业…

Phpstorm环境配置与应用

PhpStorm是一款功能强大的PHP集成开发环境,配置与应用涉及以下步骤: 下载与安装: 访问 PhpStorm 官网下载地址,选择合适的版本进行下载。双击下载的安装包文件进行安装,过程类似于其他IntelliJ IDEA产品。 个性化设…

C++ | Leetcode C++题解之第23题合并K个升序链表

题目: 题解: class Solution {// 21. 合并两个有序链表ListNode *mergeTwoLists(ListNode *list1, ListNode *list2) {auto dummy new ListNode(); // 用哨兵节点简化代码逻辑auto cur dummy; // cur 指向新链表的末尾while (list1 && list2) {if (list1…

秋招嵌入式面经

24秋招-汇川嵌入式面经--超详细! 一面 8月24日投递 9月3日一面(30min) 自我介绍: 介绍一下你的第一个项目吧 对于MCU的选型为什么使用F4的STM32? 项目里面用到了SPI进行两块MCU之间的通信,介绍一下SPI…

Linux操作系统配置git的ssh

系统:Ubuntu20.04LTS 安装git: sudo apt install git 配置git: # 添加全局git用户和邮箱 git config --global user.name "用户名" git config --global user.email "邮箱" # 查看用户名和邮箱是否有误 git config --li…

JavaEE初阶Day 13:多线程(11)

目录 Day 13:多线程(11)常见的锁策略1. 悲观锁 vs 乐观锁2. 重量级锁 vs 轻量级锁3. 自旋锁 vs 挂起等待锁4. 可重入锁 vs 不可重入锁5. 公平锁 vs 非公平锁6. 互斥锁 vs 读写锁 synchronized实现原理1. 锁升级2. 锁消除3. 锁粗化 CAS Day 13…

自助棋牌室如何用一招留住80%的客户?

棋牌室如何用一招守住80%的回头客,你想知道吗? 记得收藏,希望对你有一点点帮助! 今天我就分享一个非常简单的方法,简单到所有的棋牌室老板你立马就可以去执行的方法!第一步,加好友,…

Java面试八股之Iterator接口和Iterable接口

1. Java为什么不直接实现Iterator接口,而是实现Iterable? 这道题算是一道比较基础的题,面试官肯定也不是想让回答得多深入,只是考查对迭代器的了解程度,最好是看过源码,实际上迭代器的源码并不难。我们把注释折叠起来…