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{}