详解Vue中的scoped及穿透方法


Posted in Javascript onApril 18, 2019

scoped的由来

css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的。为了避免css样式之间的污染,vue中引入了scoped这个概念。

在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件。通过设置该属性,使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。

但是这些样式又是如何实现不相互影响呢?

scoped的原理

vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式私有化模块化的目的。

总结一下scoped三条渲染规则:

  1. 给HTML的DOM节点加一个不重复data属性(形如:data-v-19fca230)来表示他的唯一性
  2. 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-19fca230])来私有化样式
  3. 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性

上个栗子。转译前:

<style lang="scss" scoped>
  .test {
    background: blue;
    span{
      color:red;
    }
  }
</style>
<template>
  <div class="test">
    <span>hello world !</span>
  </div>
</template>

转译后:

<style lang="css">
  .test[data-v-ff86ae42] {
    background: blue;
  }
  .test span[data-v-ff86ae42]{
    color: red;
  }
</style>
<template>
  <div class="test" data-v-ff86ae42>
    <span data-v-ff86ae42>hello world !</span>
  </div>
</template>

可以看出:PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.

穿透scoped

但是,在做项目中,会遇到这么一个问题,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。那么有哪些解决办法呢?

  1. 不使用scoped 省略(个人不推荐)
  2. 在模板中使用两次style标签:
<style lang="scss">
  /*添加要覆盖的样式*/
</style>
<style lang="scss" scoped>
  /* local styles */
</style>
<!--vue官网中提到:一个 .vue 文件可以包含多个style标签。所以上面的写法是没有问题的。-->

穿透scoped >>>

<template>
 <div class="box">
  <dialog></dialog>
 </div>
</template>
<!--使用 >>>或者 /deep/ 操作符(Sass 之类的预处理器无法正确解析 >>>,可以使用/deep/)-->
<style lang="scss" scoped>
.box {
 /deep/ input {
  width: 166px;
  text-align: center;
 }
}
</style>
或者
<style lang="scss" scoped>
.box >>> input {
  width: 166px;
  text-align: center;
 }
}
</style>

希望能帮助遇到同样问题的你,thanks!

以上所述是小编给大家介绍的Vue中的scoped及穿透方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
比较简单的异步加载JS文件的代码
Jul 18 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
Vue 进阶之路(三)
Apr 18 #Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 #Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 #Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 #Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 #Javascript
vue模式history下在iis中配置流程
Apr 17 #Javascript
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
Javascript中Array用法实例分析
2015/06/13 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
js实现黑白div块画空心的图形
2018/12/13 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python3.5仿微软计算器程序
2020/03/30 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python中类型检查的详细介绍
2017/02/13 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
python三引号输出方法
2019/02/27 Python
详解Django中异步任务之django-celery
2020/11/05 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
离职证明格式样本
2015/06/12 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android