Comment utiliser l'attribut scoped de style dans vue

Cet article présente principalement l'attribut scoped permettant d'utiliser les styles avec prudence dans Vue. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un oeil

Dans le composant vue, afin de privatiser (modulariser) le style et de ne pas polluer la situation globale, vous pouvez ajouter l'attribut scoped à la balise style pour indiquer qu'il ne fait que appartient au moment actuel Modules, c'est une très bonne décision, mais pourquoi faut-il l'utiliser avec prudence ? Parce que lorsque nous devons modifier le style des composants publics (bibliothèques tierces ou composants personnalisés du projet), la portée entraîne souvent plus de difficultés et nécessite une complexité supplémentaire.

Le principe de mise en œuvre limitée des styles privatisés

Pourquoi pensez-vous que cela augmentera la complexité ? Commençons donc par les principes de mise en œuvre des modules. Pour faciliter la dénomination, nous supposons que ce type de composant est appelé composant privé de module et que les autres composants non définis sont appelés composants généraux de module.

En examinant la structure DOM, nous avons constaté que Vue ajoute des balises uniques et non répétitives à la structure DOM et au style CSS pour garantir l'unicité et atteindre l'objectif de privatisation et de modularisation du style. Le résultat du rendu spécifique est expliqué à travers un exemple.

Composant bouton composant public

Un bouton composant public, afin de modulariser le style, ajoutez-y l'attribut scoped,

//button.vue
<template>
  <p class="button-warp">
    <button class="button">text</button>
  </p>
</template>
...
<style scoped>
  .button-warp{
    display:inline-block;
  }
  .button{
    padding: 5px 10px;
    font-size: 12px;
    border-radus: 2px;
  }
</style>

Composant bouton de rendu du navigateur

La partie html et la partie CSS rendues par le composant bouton dans le navigateur sont :

<p data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
</p>

.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}

Comme le montre le au-dessus des mots, des composants avec des attributs étendus ajoutés, afin d'obtenir une modularisation des styles de composants, deux processus sont effectués :

1. Ajouter un attribut de données non répétitif au nœud HTML DOM (dans le form: data- v-2311c06a) pour exprimer son unicité

2. Ajouter un sélecteur d'attribut de données du composant actuel (tel que [data-v-2311c06a]) pour privatiser les styles

Tout le monde sait que les styles CSS ont une priorité. Bien que cette opération de scoped atteigne l'objectif de modularisation des styles de composants, elle aura une conséquence : le poids de chaque style est augmenté : en théorie, si nous souhaitons modifier ce style, un poids plus élevé est nécessaire pour couvrir ce style. C’est l’une des dimensions qui ajoutent de la complexité.

D'autres composants font référence au composant bouton

Ce qui précède analyse le résultat du rendu d'un seul composant, alors que se passera-t-il une fois que les composants se seront appelés ? , spécifiquement divisé en deux situations : les composants généraux du module font référence aux composants privés du module (essentiellement les mêmes que les composants privés du module font référence aux composants généraux du module, les composants privés du module font référence aux composants privés du module) ;

Par exemple : si le composant bouton est utilisé dans le composant content.vue, quelle est la différence dans le résultat du rendu si le composant content.vue ajoute l'attribut scoped ?

//content.vue
<template>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

Composants généraux du module (non étendus) composants privés du module de référence

Si l'attribut étendu n'est pas ajouté au style, alors le HTML et le CSS rendus sont :

<p class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
  width: 1200px;
  margin: 0 auto;
}
.content .button{
  border-raduis: 5px;
}

On peut voir que bien que l'attribut border-raduis du bouton soit modifié dans le composant de contenu, en raison de la relation de poids, le style à l'intérieur du composant prend toujours effet (à ce moment, le style externe est écrasé). Donc si nous voulons atteindre l'objectif de modifier le style, nous devons augmenter le poids du style que nous voulons modifier (ajouter un niveau de sélecteur, un sélecteur d'ID, un sélecteur parallèle, important, etc.)

Composant privé du module (ajouter scoped) Composant privé du module de référence

Et si l'attribut scoped est ajouté ? Selon les règles analysées au début (c'est également vrai) :

Ajoutez d'abord l'attribut data

à tous les nœuds DOM, puis ajoutez le sélecteur d'attribut data à la fin du sélecteur css

Ensuite, les rendus html et css sont :

<p data-v-57bc25a0 class="content">
  <p data-v-57bc25a0 class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <p data-v-57bc25a0 data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </p>
</p>

/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
  width: 1200px;
  margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
  border-raduis: 5px;
}

Pour les deux situations ci-dessus, on voit clairement que les résultats après rendu sont très différents.

Bien que nous ayons ajouté du code dans le contenu pour modifier le style du composant bouton, mais regardez attentivement, puisque la phrase .content .button est ajoutée à la fin avec la balise scoped du composant de contenu, la dernière phrase a en fait l'effet fondamental Ce n'est pas sur le nœud DOM que nous voulons, donc dans ce cas, tous les styles que nous écrivons dans le contenu n'affecteront pas le composant bouton.vue, c'est donc embarrassant. . . .

Bien sûr, ce problème peut également être résolu, c'est-à-dire que l'ajout direct de styles globaux peut être modifié, mais cela affectera inévitablement les composants à tous les endroits, donc une autre méthode est nécessaire pour en ajouter un nouveau sans le ; La balise style de l'attribut scoped signifie l'ajout de deux styles, un pour les styles privés et un pour les styles publics. C'est décidément un peu merdique, et les deux solutions ne peuvent éviter un problème : le poids ! ! !

//content.vue
<template>
  <p class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </p>
</template>
...
<style scoped>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style>
  .content .button{
    border-raduis: 5px;
  }
</style>

Est-ce conforme à la réglementation ? Il semble que je n'ai pas vu que je ne pouvais pas l'écrire comme ça, et cela a pris effet. . . Mais cela augmente la complexité de la réflexion, ce qui est un peu pénible.

Résumé des règles de rendu étendues

Résumé des trois règles de rendu étendues

1. Ajouter un non-duplicata au Attribut de données du nœud HTML DOM (formulaire : data-v-2311c06a) pour indiquer son unicité

2. Ajouter un sélecteur d'attribut de données du composant actuel (tel que [data-v-2311c06a]) à la fin de chaque sélecteur CSS (instruction CSS compilée et générée) pour privatiser le style

3. Si le composant contient d'autres composants, seul l'attribut data du composant actuel sera ajouté à la balise la plus externe des autres composants

Solution

Pour la bibliothèque tierce référencée, si l'autre partie utilise scoped, nous ne pouvons rien changer. Si nous avons vraiment besoin de modifier son style, nous pouvons mieux modifier le style dans le composant sans scoped, ou globalement Modifier le style directement est très grossier !

Pour les composants que vous entretenez, vous devez réfléchir clairement si le style du composant peut répondre à toutes les situations. S’il est vraiment nécessaire de l’ajouter, cela augmentera sans doute le travail des développeurs qui utilisent ce composant !

Bien sûr, si vous avez une meilleure solution à ce problème, dites-le-moi !

Faits intéressants

Lorsque vous utilisez scoped, vous devez faire attention à cette fonctionnalité de scoped. Je pensais qu'il s'agissait d'un BUG, ​​alors j'ai soulevé. un problème L'intention initiale de la conception étendue n'est pas de permettre au style du composant actuel de modifier le style de tout autre endroit, à cause de la conception. Alors bien sûr, ce numéro a été clos

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

À propos des connaissances en matière de sécurité du module de chiffrement dans Nodejs (tutoriel détaillé)

Comment flouter la liste déroulante dans Fonction de requête angulaire

Comment implémenter la connexion en js qui nécessite une vérification glissante

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!