Le principe de mise en œuvre du scoped dans Vue et l'utilisation de la pénétration scoped (avec code)

Ce que cet article vous apporte concerne le principe de mise en œuvre de scoped dans Vue et l'utilisation de la pénétration scoped (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. vous avez aidé.

1. Qu'est-ce qui est scoped

Il y a un attribut spécial sur la balise de style dans le fichier Vue, scoped. Lorsqu'une balise de style possède un attribut scoped, son style CSS ne peut être utilisé que pour le composant Vue actuel, afin que les styles des composants ne se polluent pas. Si toutes les balises de style d'un projet sont ajoutées avec l'attribut scoped, cela équivaut à réaliser une modularisation de style.

2. Le principe de mise en œuvre de scoped

L'effet de l'attribut scoped dans Vue est principalement obtenu via PostCss. Voici le code avant la traduction :

<style scoped>
    .example{
        color:red;
    }
</style>
<template>
    <div>scoped测试案例</div>
</template>

Après la traduction :

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

Autrement dit : PostCSS ajoute un attribut dynamique unique à tous les DOM d'un composant, donnant au sélecteur CSS Ajouter un sélecteur d'attribut correspondant pour sélectionner le DOM dans le composant. Cette approche fait que le style s'applique uniquement à l'élément DOM contenant l'attribut (le DOM à l'intérieur du composant).

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

1. Ajoutez un attribut de données unique (par exemple : data-v-5558831a) au nœud HTML dom pour identifier de manière unique ce dom l'élément

2. ajoute un sélecteur d'attribut de données du composant courant (par exemple : [data-v-5558831a]) à la fin de chaque sélecteur css (l'instruction css générée après compilation) Pour privatiser les styles

3.scoped pénétration

scoped semble être très utile dans le projet Vue, lorsque nous avons introduit des bibliothèques de composants tiers (telles que Using vue-). Awesome-swiper pour implémenter le carrousel mobile), vous devez modifier le style de la bibliothèque de composants tiers dans le composant local, mais vous ne souhaitez pas supprimer l'attribut scoped et provoquer une couverture de style entre les composants. À ce moment-là, nous pouvons pénétrer d'une manière spéciale.

Utilisations de pénétration de style stylet>>>

    外层 >>> 第三方组件 
        样式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

Utilisations de pénétration de style Sass et moins /deep/

    外层 /deep/ 第三方组件 {
        样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

3. Dans d'autres méthodes de modification de troisièmes -styles de bibliothèque de composants tiers dans les composants

Ci-dessus, nous avons présenté la méthode de modification des styles de bibliothèque de composants tiers importés via la pénétration de scopd lors de l'utilisation de l'attribut scoped. Ci-dessous, nous introduisons d'autres méthodes pour modifier les styles d'introduction de tiers. bibliothèques de composants

N'utilisez pas l'attribut scoped dans le composant vue. Utilisez deux balises de style dans le composant vue, une avec l'attribut scoped et une sans l'attribut scoped. Écrivez le style CSS qui doit être remplacé. Créez un fichier reset.css (style global de base) dans la balise style sans l'attribut scoped, écrivez-y le style CSS remplacé et introduisez

dans le fichier d'entrée main.js Articles connexes recommandés :

Introduction à deux façons d'implémenter la commutation de composants dans Vue (avec code)

Comment le serveur de nœuds implémente l'acquisition de données Douban (code)

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!