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

Question

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

Answer 1

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

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

例如 header是index的子组件

    .header-comp{
        h2{
            
        }
        .title{
        
        }
    }

    .index-view{
        .container{
        
        }
    }

最终渲染

    <div class="index-view">
        <div class="header-comp"></div>
    </div>

    .index-view{}
    .index-view xxx{}
    .header-comp{}
    .hader-comp .xxxx{}

Answer 2

vue-loader有个叫做Deep Selector的东东（文档见：https://vue-loader.vuejs.org/...），例如：

<style scoped>
.a >>> .b { /* ... */ }
</style>

可得：

.a[data-v-f3f3eg9] .b { /* ... */ }

如果是sass或者scss的话就要用/deep/代替>>>，例如

<style lang="scss" scoped>
.a /deep/ .b { /* ... */ }
</style>