Comment modifier le style d'étiquette interne des sous-composants en mode étendu dans Vue.js

Cet article vous expliquera comment modifier le style d'étiquette interne des sous-composants en mode étendu dans Vue.js. Le contenu est assez bon. J'espère qu'il pourra aider les amis dans le besoin

Dans Vue.js. Dans les projets, nous ajoutons généralement l'attribut scoped à la balise pour générer un attribut unique pour notre composant, comme suit Le code ci-dessus :

my-comp.vue

my comp

export default { } Copier après la connexion Le html généré est le suivant, vous pouvez voir p et toutes les sous-balises ont un attribut d'identification data-v-0a679ea0 Cet attribut est lorsque nous ajoutons scoped En conséquence. de 🎜>, si vous n'ajoutez pas scoped , cet attribut d'identification ne sera pas généré.

Un avantage que cet attribut d'identification nous apporte est que les styles au sein du composant n'affecteront pas les étiquettes des autres composants. Imaginez, si je suis dans my-comp. composant Le style suivant est écrit :

span { color: red; } Copier après la connexion Ce style est un style très courant S'il y a des balises span dans d'autres composants, il sera appliqué à cette balise. 🎜>scoped , le style final généré est le suivant :

span { color: red; } //生成后如下 span[data-v-0a679ea0] { color: red; } Copier après la connexion span[data-v-0a679ea0] Ce style ne sera appliqué qu'à la durée qui lui est propre composant , car la propriété d’identification est unique au composant.

Si nous mettons le composant A à l’intérieur du composant B, voyons comment cet attribut d’identification est généré.

home.vue

Le code html généré est le suivant :

import MyCompo from './my-comp' export default { components: {MyCompo} } Copier après la connexion

data-v-957c7522 est l'attribut d'identification du composant home Cet attribut est également ajouté au my-. comp à la racine, mais notez que la balise span de my-comp n'ajoute pas le data-v-957c7522 attribut d'identification à cause de cela span est une balise à l'intérieur du composant my-comp et n'est pas explicitement écrit dans le composant home .

Mais il arrive parfois que vous deviez écrire des styles dans le composant home pour modifier les balises dans my-comp.

Regardez le code suivant :

Ce code appartient au composant home

Mais ce code ne changera pas la couleur de .my-comp span { color: blue; } Copier après la connexion ma comp , car ce style est finalement généré. ressemble à ça :

mon- Le span la balise comp n'a pas l'attribut d'identification data-v-957c9522 .

Comment résoudre ce problème ?

Nous pouvons résoudre le problème en supprimant la portée du composant home, mais cela n'est pas recommandé. Comme mentionné ci-dessus, les styles sans portée peuvent facilement affecter d'autres composants. est très difficile à dépanner. Si vous utilisez un langage de style comme less, alors il existe une très bonne solution. Regardez le code suivant :

Jetons un coup d'œil au style final généré. . de. @deep: ~'>>>'; .my-comp @{deep} span { color: blue; } Copier après la connexion

L'attribut d'identité

a été déplacé de span vers .my-comp , afin que ce style puisse être bien appliqué à l'intérieur du composant my-comp . span et n'affectera pas les autres composants.