详解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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
前端开发之便利店收银系统代码
Dec 27 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笔记之:基于面向对象设计的详解
2013/05/14 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
用pycharm开发django项目示例代码
2018/10/24 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
python 实现表情识别
2020/11/21 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
Java如何调用外部Exe程序
2015/07/04 面试题
酒店财务部岗位职责
2015/04/14 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
Redis 哨兵机制及配置实现
2022/03/25 Redis