在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. 电子商务(电销)平台中系统设置模块(SysSetting)数据库设计明细

    以下是自己在电子商务系统设计中的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 邮件服务器 (sys_smtp_server)|-- 自动编号|-- SMTP服务器地址 (host ...

  2. Codeforces 576D. Flights for Regular Customers(倍增floyd+bitset)

    这破题调了我一天...错了一大堆细节T T 首先显然可以将边权先排序,然后逐个加进图中. 加进图后,倍增跑跑看能不能到达n,不能的话加新的边继续跑. 倍增的时候要预处理出h[i]表示转移矩阵的2^0~ ...

  3. 【bzoj2318】game with probability

    Portal -->bzoj2318 Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果正面朝上,则从n个石子中取出一个石子,否则不做 ...

  4. Linux之GDB调试介绍与应用20170601

    一.GDB调试命令   描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或i) ...

  5. _MSC_VER

    https://msdn.microsoft.com/en-us/library/vstudio/b0084kay.aspx Evaluates to an integer literal that ...

  6. laravel5.5 不能正常自动回复的问题

    虽然开启了APP_DEBUG 但是 log 却没有记录任何错误信息,后来经过测试发现原来是路由问题,因为微信服务器发送消息是使用 post 方法,但是我的路由定义只定义了 get (tp 用多了习惯了 ...

  7. Codeforces 833B The Bakery dp线段树

    B. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...

  8. mobiscroll 案例git

    https://github.com/zhoushengmufc/iosselect

  9. CollectionUtils.isEqualCollection的用法

    在使用Java的集合时,有些时候会需要比较两个集合是否相等,自己写方法其实也简单,但是既然有了好的实现,就不要自己造轮子了,只要了解这个轮子是什么原理就好了. public static boolea ...

  10. Codeforces Round #191 (Div. 2) B. Hungry Sequence(素数筛选法)

    . Hungry Sequence time limit per test 1 second memory limit per test 256 megabytes input standard in ...