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

  但当引用第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。处理方式如下:

  第一种方式:

    (1)使用 >>> 操作符

        外层  >>>  第三方组件 {  样式  }

        <style scoped>

      .a >>> .b { /* ... */ }

       </style>

    (2)使用 /deep/ 操作符

        当使用 sass/scss之类的预处理器无法正确解析 >>>,可以使用deep/ 操作符

        外层  /deep/  第三方组件 {  样式  }

        <style scoped>

      .a /deep/ .b { /* ... */ }

       </style>

vue单文件中scoped样式如何穿透?的更多相关文章

  1. vue单文件中引用路径的处理

    原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...

  2. vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法

    vue 单文件 样式写了scoped 不能覆盖框架原有样式的解决办法 在vue 里面<style scoped></style> 是为了让样式只影响本身自己组件的样式,不改变全 ...

  3. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  4. 如何手动解析vue单文件并预览?

    开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css.html.js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组 ...

  5. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  6. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  7. VUE2 第六天学习--- vue单文件项目构建

    阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...

  8. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  9. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

随机推荐

  1. Hive:HQL和Mysql:SQL 的区别

    HQL: group by 后面的参数一定要和select非聚集函数一致 where 1 要改成 where 1 = 1

  2. 【单调队列】【P3957】 跳房子

    传送门 Description 跳房子,也叫跳飞机,是一种世界性的儿童游戏,也是中国民间传统的体育游戏之一. 跳房子的游戏规则如下: 在地面上确定一个起点,然后在起点右侧画 $n$ 个格子,这些格子都 ...

  3. 《剑指offer》— JavaScript(10)矩形覆盖

    矩形覆盖 题目描述 我们可以用(2*1)的小矩形横着或者竖着去覆盖更大的矩形.请问用n个(2*1)的小矩形无重叠地覆盖一个(2*n)的大矩形,总共有多少种方法? 实现代码 function jumpF ...

  4. PhpStorm 快速查找文件 `Ctrl`+`Shift`+`N`

    PhpStorm 快速查找文件 `Ctrl`+`Shift`+`N`

  5. HDU 1695 容斥

    又是求gcd=k的题,稍微有点不同的是,(i,j)有偏序关系,直接分块好像会出现问题,还好数据规模很小,直接暴力求就行了. /** @Date : 2017-09-15 18:21:35 * @Fil ...

  6. 重构改善既有代码设计--重构手法04:Replace Temp with Query (以查询取代临时变量)

    所谓的以查询取代临时变量:就是当你的程序以一个临时变量保存某一个表达式的运算效果.将这个表达式提炼到一个独立函数中.将这个临时变量的所有引用点替换为对新函数的调用.此后,新函数就可以被其他函数调用. ...

  7. 【BZOJ】4596: [Shoi2016]黑暗前的幻想乡

    [题意]给定n个点的无向完全图,有n-1个公司各自分管一部分路,要求所有公司都有修路的生成树数.n<=17. [算法]容斥原理+生成树计数(矩阵树定理) [题解]每个生成树方案是一个公司有无修路 ...

  8. 商城项目(ssm+dubbo+nginx+mysql统合项目)总结(4)

    我不会在这里贴代码和详细步骤什么的,我觉得就算我把它贴出来,你们照着步骤做还是会出很多问题,我推荐你们去看一下黑马的这个视频,我个人感觉很不错,一步一步走下来可以学到很多东西.另外,视频和相关文档的话 ...

  9. 01布尔模型&倒排索引

    原文链接: http://www.cnblogs.com/jacklu/p/8379726.html 博士一年级选了这门课 SEEM 5680 Text Mining Models and Appli ...

  10. python 异常知识点

    raise from python 在3.0 之后引入了raise from 表达式: raise exception from otherexception 当使用该语法时,第二个表达式指定了另一个 ...