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

问题描述

问 题

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

解决方案

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

这篇关于javascript - vue.js组件化开发模式中，如何让样式只能应用于本组件及其子组件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！