详解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 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
理解JavaScript中的对象
Aug 25 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模块memcache和memcached区别分析
2011/06/14 PHP
PHP安全配置详细说明
2011/09/26 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python多继承顺序实例分析
2018/05/26 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python将时分秒转换成秒的实例
2019/12/07 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
会计系中文个人求职信
2013/12/24 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
高中班主任寄语
2019/06/21 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android