vue样式穿透

style 节点的 scoped 属性是为了防止组件之间的样式冲突,实现样式模块私有化,避免全局样式污染

对于 style上加了 scope 属性的组件,会主动加上 data-v-xx 的属性来唯一标识当前组件

如果给当前组件的 style 节点添加了 scoped 属性,则当前的样式对其子组件是不生效的,

如果想让某些样式对子组件生效, sass 和 less 的样式穿透,可以使用 /deep/ 深度选择器

<style lang="less" scoped>
.title  ::v-deep.title1{
    color: white;
  }
</style>

或者使用两个 style 标签

<style>
/* 用于修改第三方库的样式 */
</style>
 
<style scoped>

/* 自己的组件内样式 */
</style>

scoped

子组件的根元素
使用 scoped 后,父组件的样式将不会渗透到子组件中。
不过一个子组件的根节点会同时受其父组件的 scoped CSS
和子组件的 scoped CSS 的影响。这样设计是为了让父组件可
以从布局的角度出发,调整其子组件根元素的样式。

但是这次项目里面出现了父组件的样式影响了子组件的样式。
父组件

<style scoped>
 .test{color: pink;} 
</style>

子组件

<template> 
  <div class="test"> 测试父组件样式影响子组件 </div>
 </template>

此时,子组件里面的文字颜色也变为红色了;

首先注意是根元素,如果子组件中是这样的结构,并不能影响test,因为并没有明确的根元素(个人观点)

<template> 
  <div class="test">
    测试1
  </div>
  <div>
  测试2
  </div>
</template>

原文地址:http://www.cnblogs.com/yang10086/p/16906252.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性