详解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实现仿Windows关机效果
Mar 10 Javascript
javascript静态的url如何传递
May 03 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 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模拟HTTP认证
2006/10/09 PHP
最简单的PHP程序--记数器
2006/10/09 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
用 JSON 处理缓存
2007/04/27 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python怎么判断素数
2020/07/01 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
init进程的作用
2012/04/12 面试题
社团活动策划书范文
2014/01/09 职场文书
法律系毕业生求职信
2014/05/28 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python