vue | 样式隔离scoped的原理 样式穿透deep的原理
文章目录
- vue中的样式穿透
- scoped 样式隔离
- 父组件可以修改子组件根节点样式
- deep 样式穿透
- :deep(.el-col)的原理
vue中的样式穿透
scoped 样式隔离
一个style标签拥有scoped属性时,css样式就只能作用于当前的组件,这样就可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了组件的私有化,样式的模块化。
原理
scope的本质是分别给 HTML 标签和 CSS 选择器添加 data-v-xxx,来达到样式隔离的效果。
- 选中的标签中添加属性
data-v-hash值 - 样式选择器在后面追加
data-v-hash的属性选择器

样式穿透问题
使用 scoped 后,父组件是没有办法修改子组件中的样式(除了子组件根节点)
- 父组件的样式将不会渗透到子组件中
- 父组件可以修改子组件根节点样式
父组件可以修改子组件根节点样式
如果在父组件中设置样式div span,那么父组件该样式的优先级高一点,所以span是黑色
//父组件css
span{color: black;
}//子组件html
<template><span >子组件</span>
</template>//子组件css
.children span{color: blue;
}

//父组件css
div .children span{color: black; //样式没生效
}//子组件html
<div class="children"><span >子组件</span>
</div>//子组件css
.children span{color: blue;
}
此时,父组件的样式没有生效

deep 样式穿透
作用:scoped的样式可以作用得更深,比如影响子组件。
vue2中穿透的方法:::v-deep
>>> 和/deep/已弃用。
::v-deep .el-col {margin-bottom: 20px;
}
vue3穿透的方法:deep(.className)
官方推荐:deep(.el-col)深度选择器。
::v-deep(.el-col) {margin-bottom: 20px;
}// 缩写
:deep(.el-col) {margin-bottom: 20px;
}
:deep(.el-col)的原理
在上面的案例中,.children是子组件的根元素可以获取到,我们也可以看见.children标签上有子组件的hash值。所以需要穿透的是span属性。
//父组件
div .children :deep(span){color: black;
}//解析出来时
div .children[data-v-7a7a37b1] span{color: black;
}
由此可见:deep()的原理就是在前面添加[data-v-hash]。
所以如果使用deep的样式节点没有父节点,这种用法是没有意义的。使用deep之后解析的代码为[data-v-hash] 节点。
原因是没有父节点说明本身就是该组件的根元素,那么父组件可以修改其样式
相关文章:
vue | 样式隔离scoped的原理 样式穿透deep的原理
文章目录 vue中的样式穿透scoped 样式隔离父组件可以修改子组件根节点样式 deep 样式穿透:deep(.el-col)的原理 vue中的样式穿透 scoped 样式隔离 一个style标签拥有scoped属性时,css样式就只能作用于当前的组件,这样就可以使得组件之间的样式不互相污…...
UML,集合框架
1.什么是UML UML是统一建模语言的简称,它是一种由一整套图表组成的标准化建模语言。UML用于帮助系统开发人员阐明,展示,构建和记录软件系统的产出。UML代表了一系列在大型而复杂系统建模中被证明是成功的做法,是开发面向对象软件…...
如何快速轻松自动添加微信好友?
有些客需要换新的微信号,想把以前微信号上的好友全部加回来,但是因为微信系统的规定,频繁加好友容易被封号,而且手动添加好友太费时费力,还要控制加好友的间隔时间。那么有没有什么方法可以快速轻松自动添加好友呢&…...
MySQL高级语句(第一部分)
MySQL高级语句(第一部分)一、MySQL进阶查询1、select ----显示表格中一个或数个字段的所有数据记录2、distinct ----不显示重复的数据记录3、where ----有条件查询4、and or ----且 或5、in ----显示已知的值的数据记录6、between ----显示两个值范围内的数据记录7、通配符8、l…...
Perl区分文件换行符类型
背景 在Windows上使用Perl判断文件时何种换行符时,处理CR LF类型的换行符时,也识别成了LF。 思路 Windows上的换行是 CRLF , Unix上是 LF , Mac CR在Windows平台使用Perl读取文件创建文件句柄时,未对file handler设置binmode,了…...
数据备份文件生成--根据表名生成对应的sql语句文件
最近客户有个需求,希望在后台增加手动备份功能,将数据导出下载保存。 当然,此方法不适用于海量数据的备份,这只适用于少量数据的sql备份。 这是我生成的sql文件,以及sql文件里的insert语句,已亲测&#x…...
进程同步与互斥
目录 进程同步与互斥(1) 第一节、进程间相互作用 一、相关进程和无关进程 二、与时间有关的错误 第二节、进程同步与互斥 一、进程的同步 二、进程的互斥 三、临界区 进程同步与互斥(2) 三、信号量与P、V操作的物理含义…...
mysql workbench常用操作
1、No database selected Select the default DB to be used by double-clicking its name in the SCHEMAS list in the sidebar 方法一:双击你要使用的库 方法二:USE 数据库名 2、复制表名,字段名 3、保存链接...
【操作】国标GB28181视频监控EasyGBS平台更新设备信息时间间隔
国标GB28181协议视频平台EasyGBS是基于GB28181协议的视频监控云服务平台,可支持多路设备同时接入,并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音对讲、平台…...
TensorFlow入门(八、TensorBoard可视化工具的应用)
TensorBoard常用函数和类http://t.csdn.cn/Hqi9c TensorBoard可视化的过程: ①确定一个整体的图表,明确从这个图表中获取哪些数据的信息 ②确定在程序的哪些节点、以什么样的方式进行汇总数据的运算,以记录信息,比如在反向传播定义以后,使用tf.summary.scalar记录损失值的变…...
升级targetSdkVersion至33(以及迁移至Androidx)
1.设置 android.useAndroidXtrue 和 android.enableJetifiertrue 2.一键迁移至androidx:Refactor -> Migrate to Androidx 3.手动修改未能自动迁移到androidx的部分: android.support.v4.view.ViewPager.PageTransformer -> androidx.viewpager.wi…...
python3.11版本pip install ddddocr调用时报错got an unexpected keyword argument ‘det‘ 解决
一、如图出现如下问题 ddddocr.__init__() got an unexpected keyword argument det出现问题原因:python3.11默认安装版本就旧版的ddddocr1.0的,所以导致如下报错 二、解决方案一(推荐) python3.11的环境直接安装这个即可&…...
代理IP与Socks5代理:跨界电商之安全防护与智能数据引擎
第一部分:跨界电商的兴起与网络安全挑战 1.1 跨界电商的崭露头角 跨界电商已经成为全球贸易的新引擎,企业纷纷踏上了拓展国际市场的征程。 1.2 网络安全的不容忽视 跨界电商的增长也伴随着网络安全威胁的增加。黑客攻击、数据泄露和欺诈行为等风险呈…...
如何评估一个HR是否专业?看这些标准
HR在遇到优秀的人才时,以往的招聘中,我们总以惯性思维寻找吸引人才的突破口,诸如体现薪酬优厚、突出平台优势甚至提高面试话术等,却忽略了面试官本人的人格魅力,本身就是公司招聘的形象代言,因为优秀的面试…...
WordPress主题开发( 八)之—— 模板循环详细用法
WordPress 主题开发教程手册 — 模板循环 WordPress 主题开发中,模板循环是一个非常关键的概念,它负责默认机制来输出文章内容。模板循环会遍历当前页面获取的所有文章,然后使用主题中的模板标签将它们格式化并输出。 模板循环的应用 Word…...
QT : 完成绘制时钟
1.头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPainter> #include <QTimer> #include <QTime> #include <QPaintEvent> #include <QDebug> #include <QBrush>QT_BEGIN_NAMESPACE namespace Ui { class…...
香港云服务器和日本云服务器哪个好?(详细对比)
购置海外服务器时,您是在乎网络速度?价格?稳定性?当这几个因素同时存在,我们该如何选择?本篇针对海外热门的两个地区,中国香港和日本,这两种云服务器谁优谁劣?各有什么亮点?逐一进行对比分析。 一、速度上来看 中国香…...
Cross Attention和 Self- Attention 的区别?
Cross Attention和Self-Attention都是深度学习中常用的注意力机制,用于处理序列数据,其中Self-Attention用于计算输入序列中每个元素之间的关系,Cross Attention则是计算两个不同序列中的元素之间的关系。它们的主要区别在于计算注意力分数时…...
《从零开始的Java世界》02面向对象(基础)
《从零开始的Java世界》系列主要讲解Javase部分,从最简单的程序设计到面向对象编程,再到异常处理、常用API的使用,最后到注解、反射,涵盖Java基础所需的所有知识点。学习者应该从学会如何使用,到知道其实现原理全方位式…...
pve关闭windows虚拟机慢
背景: 在web界面关闭windows虚拟机一直转圈,使用命令行关闭报错 qm stop 155 trying to acquire lock... cant lock file /var/lock/qemu-server/lock-155.conf - got timeout解决 删除lock,然后用命令行重新关闭 rm /var/lock/qemu-serve…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
