javascript - Dans le modèle de développement basé sur les composants vue.js, comment faire en sorte que le style s'applique uniquement à ce composant et à ses sous-composants.

Question

Si vous utilisez scoped, le style ne peut affecter que le composant actuel mais pas ses sous-composants. Parfois, en raison de problèmes de conception, de nombreux styles sont partagés entre différents sous-composants. Je souhaite demander au maître si le style le peut. ne s'appliquer qu'à ce composant et à ses sous-composants.

Answer 1

N'utilisez pas scoped et contrôlez vous-même l'espace de noms CSS

Vous pouvez nommer chaque composant avec une classe spécifique et unique, et le CSS du composant entre dans le cadre de la dénomination.

Par exemple, l'en-tête est un sous-composant de l'index

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

    .index-view{
        .container{
        
        }
    }

Rendu final

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

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