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 c9ccee2e6ea535a969eb3f532ad9fe89 pour générer un attribut unique pour notre composant, comme suit Le code ci-dessus :

my-comp.vue

<template>
  <p class="my-comp">
    <span>my comp</span>
  </p>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

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 scopedc9ccee2e6ea535a969eb3f532ad9fe89 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 :

<style>
  span {
    color: red;
  }
</style>

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 :

<style scoped>
  span { color: red; }
</style>
//生成后如下
<style>
  span[data-v-0a679ea0] {
    color: red;
  }
</style>

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 :

<template>
  <p class="home">
    <my-compo></my-compo>
  </p>
</template>

<script>
  import MyCompo from &#39;./my-comp&#39;
  export default {
    components: {MyCompo}
  }
</script>

<style scoped>
</style>

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

<style scoped>
  .my-comp span {
    color: blue;
  }
</style>

45a2772a6b6107b401db3c9b82c049c2ma comp54bdf357c58b8a65c66d7c19c8e4d114

, 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.

<style lang="less" scoped>
  @deep: ~&#39;>>>&#39;;
  .my-comp @{deep} span {
    color: blue;
  }
</style>

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.

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!