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

Question

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

Answer 1

不使用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{}