Comment styliser les composants enfants dans Vue.js à l'aide des sélecteurs CSS ?

Style des composants enfants dans Vue.js avec /deep/, >>> ou ::v-deep

Dans le contexte de Vue.js , un style granulaire des composants enfants peut être obtenu à l'aide de sélecteurs CSS spécifiques. Cependant, des problèmes peuvent survenir lors de la mise en œuvre.

Vue 2.0 - 2.6

Pour pénétrer les composants enfants et sélectionner les éléments imbriqués, vous pouvez utiliser soit ::v- profond (avec Sass) ou >>> (sans Sass) dans vos règles CSS, comme suit :

Sass :

::v-deep .child-class {
    background-color: #000;
}

Autre CSS :

>>> .child-class {
    background-color: #000;
}

Notez que le paramètre

Vue 3 (et Vue 2.7)

Dans Vue 3, le :: Le préfixe v- est obsolète. Utilisez plutôt le sélecteur unifié :deep, mais la syntaxe recommandée est de mettre le sélecteur entre parenthèses :

:deep(.child-class) {
    background-color: #000;
}

Cette solution est également applicable à Vue 2.7, la version finale de Vue 2. .

Sélecteurs supplémentaires dans Vue 3

1. :slotted(.slot-class) : cible le contenu transmis via .
2. :global(. ma classe) : s'applique à des éléments spécifiques globalement, même à partir d'une portée composant.

Tous les sélecteurs doivent être utilisés dans un

Considérations supplémentaires

• /deep/ la syntaxe est obsolète dans toutes les versions.
• ::v-prefix est obsolète dans Vue 3 et ci-dessus.
• >>> la syntaxe est obsolète dans Vue 3 et versions ultérieures.

En appliquant ces techniques de style, vous pouvez cibler et personnaliser efficacement l'apparence des éléments dans les composants enfants de vos applications Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!