javascript – Wie man im komponentenbasierten Entwicklungsmodell von vue.js dafür sorgt, dass der Stil nur auf diese Komponente und ihre Unterkomponenten angewendet wird.

Question

Wenn Sie einen Gültigkeitsbereich verwenden, kann sich der Stil nur auf die aktuelle Komponente auswirken, nicht jedoch auf deren Unterkomponenten. Manchmal gibt es aufgrund von Designproblemen viele gemeinsame Stile zwischen verschiedenen Unterkomponenten. Ich möchte den Master fragen, ob dies der Fall ist nur auf diese Komponente und ihre Unterkomponenten angewendet werden.

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