Pourquoi mes sélecteurs Vue.js ::v-deep, >>> et Deep ne fonctionnent-ils pas ?

>> et les sélecteurs profonds fonctionnent ? " />

Dépannage de Vue.js ::v-deep, >>> et sélecteurs profonds

Arrière-plan

Vue.js fournit des moyens de styliser les éléments dans les composants imbriqués à l'aide de sélecteurs approfondis tels que ::v-deep, >>> et :deep Cependant, des problèmes surviennent lorsque ces sélecteurs sont implémentés.

Problème

Tentative d'utilisation de ::v-deep ou >. ;>> cibler des éléments enfants à partir d'un composant Vue n'a aucun effet. Les règles de style sont transmises mot à mot au composant Vue. navigateur.

Solution

Vue 2.0 - 2.6

Sass :Utiliser ::v-deep

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

Sans Sass :Utilisation >>>

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

Assurez-vous que la balise

<style scoped></style>

Vue 3 (et Vue 2.7)

Utiliser :deep(.child-class)

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

Nouveaux sélecteurs Vue 3

De plus, Vue 3 propose :

• Contenu des emplacements :Utilisez :slotted(.child-class)
• Global styles : Utilisez :global(.my-class)

Encore une fois, la balise

<style scoped></style>

Configuration Webpack

Si vous utilisez Vue Loader, assurez-vous de votre configuration comprend :

{
  test: /\.vue$/,
  use: 'vue-loader',
}

Résumé

Vue 2 :

• Utiliser ::v-deep dans Sass, >>> ; sans Sass
• Assurer le

Vue 3 :

• Utilisez :deep(.child-class)
• Le ::v- le préfixe est obsolète
• Utilisez les sélecteurs :slotted et :global comme nécessaire
• Assurer le

Remarque : La syntaxe /deep/ est obsolète dans Vue 2 et 3.

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!