Comment encapsuler élégamment des composants tiers dans Vue ? Introduction aux méthodes de conditionnement

Comment encapsuler élégamment des composants tiers dans Vue ? L'article suivant utilisera des exemples pour explorer les moyens d'encapsuler de manière plus élégante des composants tiers dans Vue. J'espère que cela sera utile à tout le monde !

1. Description des scénarios de demande

Pendant le développement réel, afin de réduire la réinvention de la roue, d'améliorer l'efficacité du travail et d'économiser du temps et des coûts de développement, Il est inévitable d'utiliser des bibliothèques de composants d'interface utilisateur, telles que element-ui, qui est très populaire dans les frontaux Web. Mais parfois, nous devons apporter des modifications en fonction du composant d'origine, comme un composant image. Nous devons unifier l'image spécifique affichée lorsque le chargement de l'image échoue et l'ajouter à chaque fois que le composant est utilisé. C'est fastidieux et prend du temps. La clé est le coût de maintenance élevé. Lorsque vous devez mettre à jour l'image qui a été mal chargée, Il faut rechercher et modifier les endroits où ce composant est à nouveau utilisé. (Partage de vidéos d'apprentissage : tutoriel vuejs)

Un autre exemple concerne les composants de pagination personnalisés, qui sont également très courants. Le style du composant, le nombre de pages par page pris en charge par défaut, L'encapsulation et la réutilisation sont bénéfiques en termes de maintenabilité et d'efficacité du développement.

Cependant, il n'est pas nécessaire d'écrire un composant de pagination à partir de zéro, il suffit de l'encapsuler sur la base d'origine. Alors, comment encapsuler rapidement et élégamment les composants d’une bibliothèque de composants tiers ? v-bind="$attrs" et v-on="$listeners" ="$listeners" nous apportera des surprises. Ils peuvent faire en sorte que le composant encapsulé « hérite » de presque toutes les propriétés v-bind et événements v-on du composant d'origine, et leur utilisation et leur fonction sont les mêmes que dans le composant d'origine.

Encapsulez el-image en tant que composant d'image personnalisée et utilisez custom-image pour afficher des images partout. Pendant le processus de chargement de l'image, l'invite « Chargement... » s'affichera uniformément et lorsqu'une erreur de chargement se produit, une image par défaut unifiée sera affichée. Ce qui suit est un processus de chargement de composant d'image personnalisé et l'effet des erreurs de chargement.

2. Introduction aux points techniques clés

1.v-bind="$attrs"

La merveilleuse utilisation de v-bind="$attrs" est de créer des composants de niveau supérieur et d'encapsuler des tiers Parties Component,

peut automatiquement lier les attributs v-bind utilisés dans la portée parent,

et les transmettre au composant encapsulé en utilisant v-bind="$attrs".

Une introduction extraite du site officiel de vue

contient des attributs

des liaisons (sauf la classe et le style) qui ne sont pas reconnues (et obtenues) comme des accessoires dans la portée parent. Lorsqu'un composant ne déclare aucun accessoire,

toutes les liaisons de portée parent (sauf la classe et le style) seront incluses ici,

et peuvent être transmises aux composants internes via v-bind="$attrs" - lors de la création de high Très utile pour les composants de niveau.

Par exemple, après avoir utilisé v-bind="$attrs" pour notre composant encapsulé Custom-Image, Nous avons également presque toutes les propriétés de el-image dans le composant custom-Image. Et son effet et son utilisation sont les mêmes que lorsque nous utilisons el-image. En d'autres termes, nous pouvons utiliser custom-Image en consultant l'article d'el-image.

2.v-on="$listeners"

v-on="$list eners" avec v-bind = "$attrs" est similaire, Il peut transmettre l'écouteur de temps dans la portée parent en utilisant v-on jusqu'à l'écouteur de temps en utilisant v-on="$listeners" et v-bind ""$pièces

Il peut être transmis aux composants internes via v-on="$listeners" - très utile lors de la création de composants de niveau supérieur.

Une introduction tirée du site officiel de vue

3. Exemples de code pour encapsuler el-image

Exemples d'utilisation de composants d'image personnalisés

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

Exemples d'encapsulation d'el-image en tant que composants d'image personnalisés

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img :src="require(&#39;image-f/icon-empty-img.png&#39;)" alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

(Apprentissage partage de vidéos : développement web front-end, Introduction à la programmation)

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!