Analyse des étapes d'utilisation ciblées dans Vue

Cette fois, je vais vous apporter une analyse des étapes d'utilisation de scoped dans Vue. Quelles sont les précautions d'utilisation de scoped dans Vue. Voici des cas pratiques, jetons un oeil.

Qu'est-ce qui est couvert ?

Sur la balise style dans le fichier vue, il y a un attribut spécial : scoped. Lorsqu'une balise de style possède l'attribut scoped, son style CSS ne peut être appliqué qu'au composant actuel, c'est-à-dire que le style ne peut être appliqué qu'à l'élément du composant actuel. Grâce à cet attribut, il est possible d'éviter que les styles entre les composants ne se contaminent les uns les autres. Si toutes les balises de style d'un projet sont étendues, cela équivaut à réaliser la modularisation des styles.

Le principe d'implémentation de scoped

L'effet de l'attribut scoped dans vue est principalement réalisé grâce à la traduction PostCSS. Voici le code de vue. avant la traduction :

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <p class="example">hi</p>
</template>

Après la traduction :

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p class="example" data-v-5558831a>hi</p>
</template>

C'est-à-dire : PostCSS ajoute un attribut dynamique unique à tous les DOM d'un composant, puis donne au sélecteur CSS Ajoutez un sélecteur d'attribut correspondant pour sélectionner le dom dans le composant. Cette approche fait que le style s'applique uniquement au dom contenant cet attribut - le dom interne du composant.

Pourquoi avez-vous besoin de pénétrer avec un scoped ?

scoped est magnifique, mais dans de nombreux projets, il y aura une situation où : référence un composant tiers, qui doit être inclus dans le composant Partiellement modifier les styles des composants tiers sans supprimer l'attribut scoped et sans provoquer de contamination de style entre les composants. À l’heure actuelle, la portée ne peut être pénétrée que par des méthodes spéciales.

<style scoped>
 外层 >>> 第三方组件 {
  样式
 }
</style>

L'utilisation de >>> vous permet de pénétrer dans la portée et de modifier les valeurs des autres composants lors de l'utilisation de l'attribut scoped.

Une méthode courbe pour sauver le pays

En fait, il existe aussi une méthode courbe pour sauver le pays, c'est-à-dire après avoir défini une balise de style contenant l'attribut scoped De plus, définissez une balise de style qui ne contient pas l'attribut scoped, c'est-à-dire définissez une balise de style globale dans un composant vue et une balise de style avec une portée :

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

Pour le moment, il vous suffit d'écrire simplement le CSS qui modifie le style tiers dans le premier style.

Méthode personnellement recommandée

Les deux méthodes ci-dessus, la méthode de pénétration viole en fait la signification de l'attribut scoped et la méthode de sauvegarde de courbe en est un autre. Cela rend le code trop laid.

Je recommande personnellement la troisième méthode, c'est-à-dire : parce que scoped est beau, mais il contient beaucoup de pièges, il n'est donc pas recommandé de ne pas utiliser l'attribut scoped, mais de distinguer les différences en ajoutant un unique classe aux composants dom externes. Cette méthode permet non seulement d'obtenir un effet similaire à celui du scoped, mais facilite également la modification des styles de divers composants tiers, et le code semble relativement confortable.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour créer un environnement de développement React avec webpack

Explication détaillée du étapes pour installer et supprimer les modules npm

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!