详解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使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
节约粮食标语
2014/06/18 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
2015年检验科工作总结
2015/04/27 职场文书
讲座新闻稿
2015/07/18 职场文书
纪检部部长竞选稿
2015/11/21 职场文书