掌握 Vue 中的范围和/deep/深度选择器
背景
我们做 Vue 项目在组件里写 css 的时候,经常会给 <style>
标签加上 scoped
,比如这样: <style lang="less" scoped>
,这样写出来的 css 就是局部的,不会影响其他组件。
另外,假设我们在自己的组件中引入了一个子组件,并且希望在我的组件中修改子组件中的样式,由于我们用了 scoped
,直接修改是不生效的。去掉 scoped
是可以的,不过没了局部 css
风险不可控。有一种更好的方式,用深度选择器修改,比如 less
中的 /deep/
。用过组件库(如element ui
)的朋友,在覆盖组件库样式的时候应该会经常用到深度选择器 /deep/
。
基于以上两点,我们来聊一聊:
- 为什么
scoped
可以形成局部css
? - 为什么
/deep/
可以跨组件修改css
?
scoped 如何形成局部 css
先看一张图:
我们审查 html
元素时发现多了很多类似 data-v-f321cf6
属性,这些属性其实就是 scoped
hash
出来的。
再来看一张页面生成的 css
截图:
仔细看第一张图标记了两种颜色,他们分别对应两种 hash
属性值:data-v-f5321cf6
和 data-v-6a6ef68c
,其实这里就是两个不同的组件生成的两个不同的值,每个加过 scoped
的组件生成的值都是唯一的。
结合两张图,不难发现 scoped
形成局部 css
的原理其实很简单,就是先给元素加上 hash
出来的属性,再通过属性选择器来选择这些元素,由于每个组件 hash
出来的属性值都是唯一的,css
属性选择器选出来的元素当然也是组件级的了,因为形成了组件内局部 css
。(如果你还不了解 css
属性选择器,可以看一下这里)
/deep/
为什么可以跨组件修改 css
一个例子
一个列表页面 ,需要在数据为空的时候展示空白页,这个空白页我们引入的是第三方组件库的空白页组件<no-data>
。
假设我们现在要修改空白页组件中图片的宽高,<no-data>
不支持传入宽高,并且我们无法改动这个第三方组件,只能在列表页通过 css
覆盖空白页组件的样式。
我们第一时间想到改样式嘛,这还不简单,于是写下:
<style lang="less" scoped>
.no-data{
img {
width: 200px;
height: 200px;
}
}
</style>
自信满满的点开浏览器查看效果,发现设置的宽高并没起到作用,空白页图片还是默认的偏大。
仔细一想,父组件用了 scoped
是不能直接改子组件内样式的,得用 /deep/
,于是乎有了下面的代码:
<style lang="less" scoped>
.no-data{
/deep/img {
width: 200px;
height: 200px;
}
}
</style>
再查看效果:
生效了,图片小了很多!
我们再来审查一下页面渲染出来的代码,没加 /deep/
的:
注意看 css
部分,这里的选择器是 .acl-nodata img[data-v-6a6ef68c]
,这里的 data-v-6a6ef68c
属性是 <no-data>
组件中的 scoped
生成的。
接着往下看,加上 /deep/
后的:
还是重点看 css
部分,这里的选择器是 .integral-detail .no-data[data-v-f5321cf6] img
,这里的 data-v-f5321cf6
是列表页的 scoped
生成的。
核心区别在于:img[data-v-6a6ef68c]
和 .no-data[data-v-f5321cf6] img
/deep/
可以跨组件修改 css
原因
通过上面的例子,我们可以分析出,在使用了 /deep/
选择器后,会把当前元素 img
的 [data-v-6a6ef68c]
干掉,并通过他的父级(准确的说是 img
元素所属空白页组件的根元素 <div class="no-data"></div>
),来查找到 img
,也就是通过 .no-data[data-v-f5321cf6] img
来定位到 img
元素。
因为我们的代码是在列表页写的,列表页 hash
出来的属性是 [data-v-f5321cf6]
,在我们使用 /deep/
之前,img
的 hash
是 [data-v-6a6ef68c]
,在列表页中的 css
代码当然是识别不到空白页组件的 [data-v-6a6ef68c]
,所以修改宽高不生效。使用 /deep/
之后,通过 .no-data[data-v-f5321cf6] img
,由于 [data-v-f5321cf6]
本身就是列表 hash
出来的,自然是可以识别的,修改宽高自然也就生效了。
为了加深理解,这里再提一点,仔细看 <div class="no-data"></div>
这一块的 html
代码,你会发现它是同时具有 [data-v-f5321cf6]
和[data-v-6a6ef68c]
两种属性,因为 <no-data>
组件的根元素是 <div class="no-data"></div>
,在列表页引入 <no-data>
, <div class="no-data"></div>
也相当于是列表中的一个元素,所以 scoped
也会给它 hash
上 [data-v-f5321cf6]
。 (这一块在实际开发中,有些朋友会搞一些骚操作,比如在父组件和子组件同时改 .no-data
)
上一篇: 使用 Vite 构建 React 项目
下一篇: 用 python 计算八字五行的得分。
推荐阅读
-
掌握 Vue 中的范围和/deep/深度选择器
-
了解并使用 Vue 中的插槽和插槽范围 - 何时使用插槽?
-
windows下进程间通信的(13种方法)-摘 要 本文讨论了进程间通信与应用程序间通信的含义及相应的实现技术,并对这些技术的原理、特性等进行了深入的分析和比较。 ---- 关键词 信号 管道 消息队列 共享存储段 信号灯 远程过程调用 Socket套接字 MQSeries 1 引言 ---- 进程间通信的主要目的是实现同一计算机系统内部的相互协作的进程之间的数据共享与信息交换,由于这些进程处于同一软件和硬件环境下,利用操作系统提供的的编程接口,用户可以方便地在程序中实现这种通信;应用程序间通信的主要目的是实现不同计算机系统中的相互协作的应用程序之间的数据共享与信息交换,由于应用程序分别运行在不同计算机系统中,它们之间要通过网络之间的协议才能实现数据共享与信息交换。进程间通信和应用程序间通信及相应的实现技术有许多相同之处,也各有自己的特色。即使是同一类型的通信也有多种的实现方法,以适应不同情况的需要。 ---- 为了充分认识和掌握这两种通信及相应的实现技术,本文将就以下几个方面对这两种通信进行深入的讨论:问题的由来、解决问题的策略和方法、每种方法的工作原理和实现、每种实现方法的特点和适用的范围等。 2 进程间的通信及其实现技术 ---- 用户提交给计算机的任务最终都是通过一个个的进程来完成的。在一组并发进程中的任何两个进程之间,如果都不存在公共变量,则称该组进程为不相交的。在不相交的进程组中,每个进程都独立于其它进程,它的运行环境与顺序程序一样,而且它的运行环境也不为别的进程所改变。运行的结果是确定的,不会发生与时间相关的错误。 ---- 但是,在实际中,并发进程的各个进程之间并不是完全互相独立的,它们之间往往存在着相互制约的关系。进程之间的相互制约关系表现为两种方式: ---- (1) 间接相互制约:共享CPU ---- (2) 直接相互制约:竞争和协作 ---- 竞争——进程对共享资源的竞争。为保证进程互斥地访问共享资源,各进程必须互斥地进入各自的临界段。 ---- 协作——进程之间交换数据。为完成一个共同任务而同时运行的一组进程称为同组进程,它们之间必须交换数据,以达到协作完成任务的目的,交换数据可以通知对方可以做某事或者委托对方做某事。 ---- 共享CPU问题由操作系统的进程调度来实现,进程间的竞争和协作由进程间的通信来完成。进程间的通信一般由操作系统提供编程接口,由程序员在程序中实现。UNIX在这个方面可以说最具特色,它提供了一整套进程间的数据共享与信息交换的处理方法——进程通信机制(IPC)。因此,我们就以UNIX为例来分析进程间通信的各种实现技术。 ---- 在UNIX中,文件(File)、信号(Signal)、无名管道(Unnamed Pipes)、有名管道(FIFOs)是传统IPC功能;新的IPC功能包括消息队列(Message queues)、共享存储段(Shared memory segment)和信号灯(Semapores)。 ---- (1) 信号 ---- 信号机制是UNIX为进程中断处理而设置的。它只是一组预定义的值,因此不能用于信息交换,仅用于进程中断控制。例如在发生浮点错、非法内存访问、执行无效指令、某些按键(如ctrl-c、del等)等都会产生一个信号,操作系统就会调用有关的系统调用或用户定义的处理过程来处理。 ---- 信号处理的系统调用是signal,调用形式是: ---- signal(signalno,action) ---- 其中,signalno是规定信号编号的值,action指明当特定的信号发生时所执行的动作。 ---- (2) 无名管道和有名管道 ---- 无名管道实际上是内存中的一个临时存储区,它由系统安全控制,并且独立于创建它的进程的内存区。管道对数据采用先进先出方式管理,并严格按顺序操作,例如不能对管道进行搜索,管道中的信息只能读一次。 ---- 无名管道只能用于两个相互协作的进程之间的通信,并且访问无名管道的进程必须有共同的祖先。 ---- 系统提供了许多标准管道库函数,如: pipe——打开一个可以读写的管道; close——关闭相应的管道; read——从管道中读取字符; write——向管道中写入字符; ---- 有名管道的操作和无名管道类似,不同的地方在于使用有名管道的进程不需要具有共同的祖先,其它进程,只要知道该管道的名字,就可以访问它。管道非常适合进程之间快速交换信息。 ---- (3) 消息队列(MQ) ---- 消息队列是内存中独立于生成它的进程的一段存储区,一旦创建消息队列,任何进程,只要具有正确的的访问权限,都可以访问消息队列,消息队列非常适合于在进程间交换短信息。 ---- 消息队列的每条消息由类型编号来分类,这样接收进程可以选择读取特定的消息类型——这一点与管道不同。消息队列在创建后将一直存在,直到使用msgctl系统调用或iqcrm -q命令删除它为止。 ---- 系统提供了许多有关创建、使用和管理消息队列的系统调用,如: ---- int msgget(key,flag)——创建一个具有flag权限的MQ及其相应的结构,并返回一个唯一的正整数msqid(MQ的标识符); ---- int msgsnd(msqid,msgp,msgsz,msgtyp,flag)——向队列中发送信息; ---- int msgrcv(msqid,cmd,buf)——从队列中接收信息; ---- int msgctl(msqid,cmd,buf)——对MQ的控制操作; ---- (4) 共享存储段(SM) ---- 共享存储段是主存的一部分,它由一个或多个独立的进程共享。各进程的数据段与共享存储段相关联,对每个进程来说,共享存储段有不同的虚拟地址。系统提供的有关SM的系统调用有: ---- int shmget(key,size,flag)——创建大小为size的SM段,其相应的数据结构名为key,并返回共享内存区的标识符shmid; ---- char shmat(shmid,address,flag)——将当前进程数据段的地址赋给shmget所返回的名为shmid的SM段; ---- int shmdr(address)——从进程地址空间删除SM段; ---- int shmctl (shmid,cmd,buf)——对SM的控制操作; ---- SM的大小只受主存限制,SM段的访问及进程间的信息交换可以通过同步读写来完成。同步通常由信号灯来实现。SM非常适合进程之间大量数据的共享。 ---- (5) 信号灯 ---- 在UNIX中,信号灯是一组进程共享的数据结构,当几个进程竞争同一资源时(文件、共享内存或消息队列等),它们的操作便由信号灯来同步,以防止互相干扰。 ---- 信号灯保证了某一时刻只有一个进程访问某一临界资源,所有请求该资源的其它进程都将被挂起,一旦该资源得到释放,系统才允许其它进程访问该资源。信号灯通常配对使用,以便实现资源的加锁和解锁。 ---- 进程间通信的实现技术的特点是:操作系统提供实现机制和编程接口,由用户在程序中实现,保证进程间可以进行快速的信息交换和大量数据的共享。但是,上述方式主要适合在同一台计算机系统内部的进程之间的通信。 3 应用程序间的通信及其实现技术 ---- 同进程之间的相互制约一样,不同的应用程序之间也存在竞争和协作的关系。UNIX操作系统也提供一些可用于应用程序之间实现数据共享与信息交换的编程接口,程序员可以通过自己编程来实现。如远程过程调用和基于TCP/IP协议的套接字(Socket)编程。但是,相对普通程序员来说,它们涉及的技术比较深,编程也比较复杂,实现起来困难较大。 ---- 于是,一种新的技术应运而生——通过将有关通信的细节完全掩盖在某个独立软件内部,即底层的通讯工作和相应的维护管理工作由该软件内部来实现,用户只需要将通信任务提交给该软件去完成,而不必理会它的具体工作过程——这就是所谓的中间件技术。 ---- 我们在这里分别讨论这三种常用的应用程序间通信的实现技术——远程过程调用、会话编程技术和MQSeries消息队列技术。其中远程过程调用和会话编程属于比较低级的方式,程序员参与的程度较深,而MQSeries消息队列则属于比较高级的方式,即中间件方式,程序员参与的程度较浅。 ---- 4.1 远程过程调用(RPC)
-
透彻掌握 .NET Core 中的 async 和 await:深度解析
-
Vue 3.x中的深度选择器:深入理解deep的用法
-
掌握Vue3的第二十九节:在全局范围内定义函数和变量
-
掌握Vue3中的数据监听和Composition API的watch函数
-
在Vue中,你真的了解 :deep、/deep/、>>>、和::v-deep 这些CSS深度选择器吗?