深入理解vue中scoped样式作用域的规则

时间: 2020-08-12阅读: 67标签: 作用域

先来说说实现方式

vue中的样式作用域是通过属性选择器来实现的,例如同样一个类名,我们是通过 .类名[属性名] 来做区分的,我们这里主要是要搞清楚这里的属性名是怎么分配的。


样式作用域规则

接下来我们分情况来说一下样式作用域:

  • 对于有样式作用域的组件,该组件的所有后代元素都会具备一个相同的作用域属性,而该组件的内部的根元素除了具备当前组件作用域属性也会具备其父级组件的作用域,当然如果父级没有作用域则不具备
  • 对于没有样式作用域的组件,如果父组件是有作用域的,那么该组件只有根元素会继承父组价的作用域,其后代的元素不会有作用域
  • 对于处在同一层次的组件,其作用域是相同的,从下一代开始才会有所区别
  • 特别要注意的是对于组件的复用,在当前项目,不管是什么层级,复用的组件作用域都相同


样式作用域图示



实际应用效果

有了基本的样式作用域知识储备之后,接下来我们来看一下 vue 最终会怎么将这些样式作用域应用到选择器的。

对于单个的选择器 .box[>.box a[>.box[>.box > div[>根据上面的知识储备,我们就知道,如果组件都只被引用一次,通常是不存在样式干扰的,但是如果一个组件在一个页面中复用多次,依然是有样式干扰的可能。

来自:https://blog.csdn.net/GD6570/article/details/108547949


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9648

关闭

JavaScript中作用域链的概念及用途

之前我写过一篇关于JavaScript中的对象的一篇文章,里面也提到了作用域链的概念,相信大家对这个概念还是没有很深的理解,并且这个概念也是面试中经常问到的,因为这个概念实在太重要了

不只是块级作用域,你不知道的let和const

ES6新增了两个重要的关键字let和const,相信大家都不陌生,但是包括我在内,在系统学习ES6之前也只使用到了【不存在变量提升】这个特性。let声明一个块级作用域的本地变量

vue 中4个级别的作用域

除了 JS 已有的功能外,Vue还具有自己独特的作用域级别。作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的可见性。

JavaScript 变量、作用域及内存详解

基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的。

ES5中模仿块级作用域

有一定JavaScript开发经验的人应该会熟悉下面这种立即执行函数的写法:不过即使不熟悉也没关系,这里我会讲解这种写法的含义。先来看下面这个更容易理解的示例:

javascript作用域有几种类型?

作用域是可访问的变量的集合;在JavaScript中,作用域为可访问变量,对象,函数的集合。那么在JavaScript中有几种作用域类型?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

Js静态作用域和动态作用域

静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量)。 动态作用域–函数的作用域是在函数调用的时候才决定的

ES6之块级作用域

在ES5中,只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域;亦或者循环中的变量泄露为全局变量。用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。

CSS的私有作用域scoped和深度选择器/deep/和>>>

当给<style scoped> </style>添加 scoped 属性之后,它会给每一个class添加一个唯一的属性值,避免了出现类名重复,样式重叠被污染的问题,相当于限制了作用域,它的 CSS 只作用于当前组件

Js作用链、作用域

函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!