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 scoped est utilisé, 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. J'aimerais demander à un expert si le style le peut. ne s'appliquer qu'à ce composant et aux autres sous-composants de ses sous-composants.

漂亮男人 · Answer

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

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