项目开发过程中,我们经常会用到scoped来使样式文件只适用于当前模块,scoped设计的初衷就是让样式变得不可修改,可以很好的实现私有化

简单介绍一下scoped三条渲染规则

  • dom:html的dom节点会有唯一的data属性(例如下方的data-v-5558831a)
  • <div data-v-5558831a class="header">
        <div data-v-5558831a class="header-left"></div> 
        <div data-v-5558831a class="header-input">输入城市景点,游玩主题</div> 
        <div data-v-5558831a class="header-right">城市</div>
    </div>

     

  • css:编译后的css选择器末尾会加一个当前组件的data属性来私有化样式
  • .header .header-left[data-v-5558831a] {
        width: 0.64rem;
        float: left;
    }
    
  • 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
  • <div class="home">
        <home-header></home-header>
    </div>
    编译后:
    <div data-v-0c57a6db class="home">
        <div data-v-5558831a data-v-0c57a6db class="header">
            <div data-v-5558831a class="header-left"></div> 
            <div data-v-5558831a class="header-input">输入城市景点,游玩主题</div> 
            <div data-v-5558831a class="header-right">城市</div>
        </div>
    </div>
    注:由此便可得知父组件scoped内样式无法修改子组件元素样式的原理了
    

    样式穿透

    适用范围:

  • 父组件添加scoped之后,解决在父组件中无法修改子组件样式问题
  • 对公共组件的样式实现微调
  • 对设置了scoped的子组件里的元素进行控制
  • 方法:

  • 在scoped样式中设置样式穿透,使之不受scoped的限制

  • <style lang="stylus" scoped>
      .wrapper >>> .swiper-pagination-bullet-active
          background: #fff !important
    </style>
    // 注:样式穿透是vue-loader的特性
    // 当lang = less or sass 时 解析不了">>>"符号,则使用 /deep/
    .a /deep/ .b {
      /*样式*/
    }

     

Logo

前往低代码交流专区

更多推荐