登录

javascript - vue.js组件化开发模式中,如何让样式只能应用于本组件及其子组件。

使用scoped的话样式就只能影响到当前组件而不能影响其子组件了,而有时因为设计问题,不同子组件间存在大量的样式共用,想着请教大神是否能让样式只能应用于本组件及其子组件。

# JavaScript
怪我咯怪我咯2042 天前604 次浏览

全部回复(1) 我要回复

  • 漂亮男人

    漂亮男人2017-05-18 10:53:18

    不使用scoped并自己把控制握好css命名空间

    可以对每个组件都用特定唯一的class命名,且该组件的css都在该命名的范围内。

    例如 header是index的子组件

        .header-comp{
            h2{
                
            }
            .title{
            
            }
        }
    
        .index-view{
            .container{
            
            }
        }

    最终渲染

        <p class="index-view">
            <p class="header-comp"></p>
        </p>
        .index-view{}
        .index-view xxx{}
        .header-comp{}
        .hader-comp .xxxx{}

    回复
    0
  • 取消回复发送