Mutualiser des fonctionnalités

1. Définition

Les slots permettent d’injecter du contenu dans le template d’un composant à partir du composant parent. Ceci peut être utile lorsque vous souhaitez créer des composants génériques avec une logique propre dont le contenu du template sera différent selon l’endroit où vous les utilisez dans votre application.

Dans le template du composant parent, on injecte un contenu du composant enfant comme ceci :

<mon-composant> 
  Texte injecté dans le composant 
</mon-composant> 

Et dans le template du composant enfant, on utilise l’élément <slot> pour désigner l’emplacement du contenu injecté :

Vue.component('mon-composant', { 
  template: ` 
    <div> 
      <slot><slot> 
    </div> 
` 
}); 

Prenons l’exemple d’une bannière pour afficher un message d’erreur. Celle-ci comprendra également un bouton pour la fermer.

Nous utilisons le style des alertes du framework css Bootstrap 4. Ajoutez cette feuille de style à votre projet :

body { 
    font-family: BlinkMacSystemFont; 
    font-size: 1rem; 
    font-weight: 400; 
    line-height: 1.5; 
    color: #212529; 
    text-align: left; 
} 
 
.alert { 
    position: relative; 
    top: 0; 
    z-index: 2; 
    padding: .75rem 1.25rem; 
    margin-bottom: 1rem; 
    color: #721c24; 
    background-color: #f8d7da; 
    border-color: #f5c6cb; 
    border: 1px solid transparent; 
    border-radius: .25rem; 
} 
 
.close { 
    float: right; 
    font-size: 1.5rem; 
    font-weight: 700; 
    line-height: 1; 
    text-shadow:...

1. Définition

Un autre moyen très pratique pour mutualiser des traitements est d’utiliser des composants sans rendu (renderless components en anglais), c’est-à-dire des composants sans template, qui se chargent juste d’exécuter des traitements métier et qui mettent ensuite à disposition les résultats aux composants enfants à travers leur propriété d’instance $scopedSlots. Cela permet d’isoler des traitements génériques et de pouvoir s’en servir comme n’importe quel autre composant dans le template du composant parent.

Vue.components('composant-fonctionnel', { 
  data() { 
    return { 
      resultat: "" 
    } 
  }, 
  mounted() { 
    traiter(); 
  }, 
  methods: { 
    traiter() { 
      // traitement métier à exécuter 
      this.resultat = "terminé"; 
    } 
  } 
  render() { 
    return $this.scopedSlot.default({ 
      data: this.resultat; 
    }); 
  } 
}); 

Ici, nous exécutons un traitement une fois que le composant est monté et nous assignons le résultat au slot par défaut de l’instance dans la fonction render().

Nous avons vu dans la section précédente que la propriété this.$scopedSlots représentait l’ensemble des slots nommés, ainsi que le slot par défaut du template.

Dans l’exemple précédent, la fonction render()

render() { 
  return $this.scopedSlot.default({ 
    monResultat: this.resultat; 
  }); 
} 

est l’équivalent du template suivant :

<slot :monResultat="resultat"></slot> 

Nous pouvons donc ensuite utiliser notre composant dans le template d’un composant parent...

1. Définition

Les mixins sont un autre moyen mis à disposition par Vue.js pour encapsuler des traitements métier réutilisables dans plusieurs instances Vue. Un mixin est un objet qui peut encapsuler les différentes options d’un composant. Lors du rendu, toutes les options du mixin seront fusionnées avec les options du composant.

Lorsque du code est répété dans plusieurs composants, il peut être mutualisé dans un mixin.

Pour créer un mixin, il suffit tout simplement de déclarer un objet JavaScript avec comme options les options de l’instance que nous voulons surcharger.

let maMixin = { 
  data() { 
    return { 
      personne: { 
        prenom: "Franck", 
        age: 32 
      } 
    } 
  }, 
  methods: { 
    log() { 
      console.log("composant via mixin créé"); 
    } 
  }, 
  created() { 
    console.log(`Bonjour ${this. personne.prenom} - 
${this. personne.age} ans`); 
    this.log(); 
  }, 
} 

Pour utiliser le code du mixin dans notre composant, nous utilisons l’option mixins, qui prend en valeur un tableau de mixins....

1. Définition

Développer un plugin est un autre moyen de mutualiser des fonctionnalités avec une portée globale dans une application. C’est notamment via les plugins que nous allons pouvoir développer des librairies tierces compatibles avec Vue.js.

Il existe des plugins officiels, comme Vue-Router ou Vuex, que nous verrons par la suite, et plusieurs centaines de plugins pour divers besoins développés par la communauté de développeurs Vue.js.

Une liste des meilleurs plugins est disponible sur le dépôt Awesome-Vue, ainsi que beaucoup d’autres ressources au sujet de Vue.js :

https://github.com/vuejs/awesome-vue

Vous trouverez également de nombreux plugins sur https://vuejsexamples.com/

Ce dépôt comporte aussi d’autres ressources, comme des exemples de projets, des tutoriels, podcasts, etc.

Les plugins sont aussi un bon moyen pour créer une passerelle entre des librairies tierces écrites en JavaScript et Vue.js. Le plugin embarque alors tous les mécanismes pour rendre la librairie réactive.

Concrètement, un plugin est un fichier JavaScript où l’on expose une méthode install qui prend en premier argument le constructeur Vue et en deuxième argument un objet optionnel options si vous avez besoin d’utiliser des propriétés et méthodes définies en amont dans votre code :

MonPlugin.install = function (Vue, options) { 
  // code du plugin 
}; 

ou si vous utilisez un empaqueteur de module comme Webpack :

/* fichier monPlugin.js */ 
 
export default { 
  install (Vue, options) { 
    // code du plugin 
  } 
} 

Il s’utilise ensuite avec la méthode Vue.use() :

Vue.use(MonPlugin, { option1: true }); 

N’oubliez pas d’importer le module si vous utilisez un empaqueteur de module :

import MonPlugin from "../chemin/monPlugin.js" 
 
Vue.use(MonPlugin, { option1: true }); 

Les plugins offrent plusieurs possibilités :

MonPlugin.install = function (Vue, options) { 
 
  Vue.maPropGlobale...

1. Définition

Dans le chapitre Comprendre les fondamentaux de Vue.js, nous avons vu les différentes directives v-bind, v-for, v-if, v-on, v-model, etc., et les fonctionnalités qu’elles apportent.

Une directive n’est rien d’autre qu’un attribut permettant d’apporter des modifications au DOM de la page.

Si vous souhaitez apporter d’autres fonctionnalités à vos templates, il est possible de créer vos propres directives déclarées de manière globale avec la méthode directive de l’objet Vue. Elle prend en premier paramètre le nom de la directive et en deuxième paramètre une fonction de mise à jour ou un objet avec différents hooks :

Vue.directive('ma-directive', function(element) { 
  // manipulation de l'élément 
}); 

Vue.directive('ma-directive', { 
  // hooks 
}); 

Vous pouvez aussi déclarer votre directive de manière locale dans un composant, avec l’option directive :

Vue.component('mon-composant', { 
  directives: { 
    'ma-directive': { 
      // hooks 
    } 
  } 
}); 

La directive personnalisée s’utilise ensuite dans le template en attribut d’un élément avec le préfixe "v-" :

<div v-ma-directive></div> 

Tout comme les directives que nous avons pu voir jusqu’à présent, on peut définir des arguments et des modificateurs et lui passer en valeur une expression JavaScript.

<div v-ma-directive:argument.modificateur="envoyer()"></div> 

Les hooks sont des crochets du cycle de vie de l’élément sur lequel est positionnée la directive. Ils prennent en valeur...